Код jQuery не выполнен в JSFiddle

Question

Я все еще изучаю jQuery, и я рассказал о некоторых обучающих онлайн. Я получил код с этого сайта и я включил его в JSFiddle, чтобы попробовать, но это не было `работы:

http://www.leniel.net/2012/10/javascript-regex-jquery-to-match-only-english-characters-in-input-textbox.html#sthash.XQxbhteA.1FTBwPAJ.dpbs

HTML

<input id="mytextbox" style="width:300px" placeholder="Only English letters are allowed here..."> 

JS

$("#mytextbox").on("keypress", function(event) { 

    // Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space) 
    // For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions 
    var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g; 

    // Retrieving the key from the char code passed in event.which 
    // For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029 
    var key = String.fromCharCode(event.which); 

    //alert(event.keyCode); 

    // For the keyCodes, look here: http://stackoverflow.com/a/3781360/114029 
    // keyCode == 8 is backspace 
    // keyCode == 37 is left arrow 
    // keyCode == 39 is right arrow 
    // englishAlphabetAndWhiteSpace.test(key) does the matching, that is, test the key just typed against the regex pattern 
    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) { 
     return true; 
    } 

    // If we got this far, just return false because a disallowed key was typed. 
    return false; 
}); 

$('#mytextbox').on("paste",function(e) 
{ 
    e.preventDefault(); 
}); 

Каркас, который я использовал, был No-Library (чистый JS) и расширение было установлено на onload.

Этот сценарий, похоже, работает на сайте, о котором я говорил. Могу я узнать, где я ошибся? Может быть, я не включил некоторые библиотеки jQuery?

Answer 1

Вы должны включить файлы Jquery и использовать его

$("#mytextbox").on("keypress", function(event) { 
 

 
    // Disallow anything not matching the regex pattern (A to Z uppercase, a to z lowercase and white space) 
 
    // For more on JavaScript Regular Expressions, look here: https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Regular_Expressions 
 
    var englishAlphabetAndWhiteSpace = /[A-Za-z ]/g; 
 

 
    // Retrieving the key from the char code passed in event.which 
 
    // For more info on even.which, look here: http://stackoverflow.com/q/3050984/114029 
 
    var key = String.fromCharCode(event.which); 
 

 
    //alert(event.keyCode); 
 

 
    // For the keyCodes, look here: http://stackoverflow.com/a/3781360/114029 
 
    // keyCode == 8 is backspace 
 
    // keyCode == 37 is left arrow 
 
    // keyCode == 39 is right arrow 
 
    // englishAlphabetAndWhiteSpace.test(key) does the matching, that is, test the key just typed against the regex pattern 
 
    if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39 || englishAlphabetAndWhiteSpace.test(key)) { 
 
     return true; 
 
    } 
 

 
    // If we got this far, just return false because a disallowed key was typed. 
 
    return false; 
 
}); 
 

 
$('#mytextbox').on("paste",function(e) 
 
{ 
 
    e.preventDefault(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="mytextbox" style="width:300px" placeholder="Only English letters are allowed here...">

Answer 2

В качестве основы, вам нужно выбрать версию JQuery (например JQuery 2.1.0) вместо No-Library (чистый JS).

Если вы этого не сделаете, библиотека jQuery не будет загружена и, следовательно, ваш jQuery-зависимый код не будет работать.

Answer 3

Выберите библиотеку JQuery в верхнем левом выпадающем списке, и он должен работать нормально, как на мой Fiddle ниже:

http://jsfiddle.net/Delorian/8b7trd6d/

(copied OP's code)