jQuery 101: Basic examples
Simple examples of selecting based on class and id of elements, binding a function to the click event, and changing css through jQuery.
HTML
<input id="txt" style="width: 200px;" type="text" mask="PositiveNumbersOnly">
CSS
body {
background-color: #eef;
padding: 5px;
}
JavaScript
var dict_generalNumbers = {
"96": "0", "97": "1", "98": "2", "99": "3", "100": "4", "101": "5", "102": "6", "103": "7", "104": "8", "105": "9", "48": "0", "49": "1",
"50": "2", "51": "3", "52": "4", "53": "5", "54": "6", "55": "7",
"56": "8", "57": "9", "109": "-", "189": "-", "110": ".", "190": ".",
"46": "DELETE", "8": "BACKSPACE", "13": "ENTER", "9": "TAB", "37": "LEFT",
"38": "TOP", "39": "RIGHT", "40": "DOWN", "35": "END", "36": "HOME"
};
$(document).on('keydown', 'input[mask="PositiveNumbersOnly"]', function (e) {
var MainCharKey = e.which.toString();
if (isValidDigitToShow(MainCharKey) == false ||
dict_generalNumbers[MainCharKey] == '.' ||
dict_generalNumbers[MainCharKey] == '-' ||
dict_generalNumbers[MainCharKey] == ',' ||
typeof dict_generalNumbers[MainCharKey] === 'undefined') {
console.log("3_1: " + isValidDigitToShow(MainCharKey));
console.log("3: " + dict_generalNumbers[MainCharKey]);
e.preventDefault();
return false;
}
});
$(document).on('keyup', 'input[mask="PositiveNumbersOnly"]', function (e) {
if (e.which != undefined) {
var MainCharKey = e.which.toString();
if (isValidDigitToShow(MainCharKey) == false ||
dict_generalNumbers[MainCharKey] == '.' ||
dict_generalNumbers[MainCharKey] == '-' ||
dict_generalNumbers[MainCharKey] == ',' ||
typeof dict_generalNumbers[MainCharKey] === 'undefined') {
console.log("4_1: " + isValidDigitToShow(MainCharKey));
console.log("4: " + dict_generalNumbers[MainCharKey]);
e.preventDefault();
return false;
}
if (MainCharKey == 9 || MainCharKey == 13) {
$(this).select();
}
}
});
function isValidDigitToShow(MainCharKey) {
if (dict_generalNumbers[MainCharKey] == undefined ||
...