I would like to use the following code to restrict input (to alphanumeric) into a text field:
$('input').bind('keypress', function (event) {
var regex = new RegExp("^[a-zA-Z0-9]+$");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
The above code works great on a standard input field, but when I type into a field generated by Chosen, the function is not applied. The chosen plugin does generate a div containing <input type="text"> but $('input') doesn't seem to touch it. I'm guessing this is due to the timing of when the above code is applied..
Instead of .bind(), consider using .on() which will work for elements that are created dynamically.
Jack's answer works. But the important thing to understand is that the keypress event bubbles, so you can catch it anywhere up the node hierarchy, at a node that is not generated dynamically.
http://jsfiddle.net/KWv7Z/6/
$(document).bind('keypress', function (event) {
// Will fire for all elements, we only care for inputs
// Also allow navigation keypresses
if (event.target.tagName.toUpperCase() != "INPUT" ||
$.inArray(event.which, [8,9,13,16,17,18,19,20,27,33,34,35,36,37,38,39,40,45,46]) ) {
return;
}
var regex = new RegExp("^[a-zA-Z0-9]+$");
// jQuery already normalizes event.which
var key = String.fromCharCode(event.which);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
This is also more memory friendly since it doesn't install a separate handler per input on the page.
Related
I have a 'keydown' event on javascript for navigating table using arrow keys:
my code as follows:
document.onkeydown= function() { keyDown();};
The implementation code as follows:
function keyDown(e){
var evt=(e)?e:(window.event)?window.event:null;
var key = evt.keyCode || evt.which;
if(key==38 || key==40){
alert("working");
}
}
How can I make it works on all browsers? What I am doing wrong here?
You need to pass the event variable that the system passes in to your function or use the standardised addEventListener method:
// Passing the event
document.onkeydown = function(e) { keyDown(e); };
// Using event listeners
document.addEventListener('keydown', keyDown, false);
Then you should rely on the event passed - do not use window.event - if the event is not passed to your function you have bigger issues to worry about than finding the event.
function keyDown(e){
if(e.which == 38 || e.which == 40){
alert("working");
}
}
I would learn more about the addEventListener method as assigning functions to the documents own onEvent attributes is not advised. What if you want to change this later? What if you want to add some code some of the time? Event Listeners are great for that and they don't modify the default behaviour here. You can add and remove these on the fly, making it much more versatile. Have a read here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
I'm working on my personal website and I've build in some easter egg hotkeys. On every page pressing the 'm' key should hide the menu and pressing the 'g' key should launch a game ontop of the current page. On another page I have the 't' and 'l' keys perform other CSS changes. On every page the game and menu keys operate as expected except for the page with the listener for 't' and 'l'. There is clearly some kind of conflict preventing them all from working on each page. I believe it is because I have the listeners declared across three different files. I would like to keep it that way so that my site is more modular (i.e. I can easily transfer the js file for the game to any other website). Any ideas?
First listener, 'm' key: (nav-script.js)
document.addEventListener('keydown', function(evt){
var evt = evt || window.event;
if(evt.keyCode == 77){
showNav();
}
},false);
Second listener, 'g' key: (clickgame.js)
document.onkeydown = enable;
function enable(event){
// Enables/disables the game
var event = event || window.event;
if(event.keyCode == 71 && !enabled){ // 71 is the code for the 'G' key
game = true;
enabled = true;
setup();
}else if(event.keyCode == 71){
game = false;
enabled = false;
quitgame();
}
}
Third listener, 'l' and 't' keys: (project-focus.js)
document.onkeydown = focusFeatures;
function focusFeatures(event){
var event = event || window.event;
if(event.keyCode == 76){
lightswitch();
}else if(event.keyCode == 84){
textswitch();
}
}
The document.onkeydown = assignment overwrites all previously assigned handlers. You need to use addListener to effectively attach multiple handlers for the same event.
Or, you could just use jQuery as that will make things a whole lot easier.
When you do this:
document.onkeydown = focusFeatures;
You are replacing every other onkeydown listener with focusFeatures.
This is the same for document.onkeydown = enable.
You should do this instead:
document.addEventListener('keydown', enable, false); // for the games
document.addEventListener('keydown', focusFeatures, false); // for the focus features
Plus you should first declare the function, and then assign it to the listener.
Am I correct in understanding that each JS file is loaded on the page? If so then the last file to be loaded is clobbering the previous document.onkeydown handler.
Each document can have only one document.onkeydown handler so you will have to do some clever event dispatching to be sure they are propagated to every piece of code that needs it. Common libraries such as jQuery and Google Closure will handle this for you. Here is an example in jQuery:
$(document).keydown(function(e) {
if (e.keyCode == 76) {
window.console.log("pressed l!");
}
});
$(document).keydown(function(e) {
if (e.keyCode == 71) {
window.console.log("pressed g!");
}
});
And a link to it working in action: http://jsfiddle.net/v7v4L/
This question already has answers here:
event.preventDefault() vs. return false
(14 answers)
event.preventDefault() vs. return false (no jQuery)
(4 answers)
Closed 8 years ago.
I searched for a similar question and someone claimed that return false is similar to event.stopPropagation() and event.preventDefault(), but I have tried the claimed examples and it doesn't work. The code is below:
<ul>
<li>
baidu.com
</li>
</ul>
This is the code of html.
ul.addEventListener('click', function(event) {
alert('ul');
}, false);
li.addEventListener('click', function() {
alert('li');
}, false);
a.addEventListener('click', function(event) {
alert('a');
return false;
}, false);
This is the code of js.
If the return false is both event.stopPropagation() and event.preventDefault().
It will only alert('a'), but finally it alerts three times.
e.preventDefault() prevents default behaviour
e.stopPropagation() prevents other event handlers (on parent and child elements) to be fired
e.preventImmediatePropagation() prevents other event handlers being fired on the same element
return false used to do all of the above
Please note that return false is deprecated, so please try to use the event’s methods.
as per your code.
if you use event.preventDefault() on "a". it will not redirected to the link if you have any. Default action is prevented.
if you use event.stopPropagation() on "a". Only "a" click event will be fired rest will be stopped.
Do i need to explain about "return false"?
You haven't really included enough of your code for me to be able to figure out what you want to do - but here's an explanation of the terms you asked about:
event.preventDefault()
event.stopPropagation()
event.stopImmediatePropagation()
Are 3 jQuery functions that differ slightly in how they prevent events and handlers from being executed.
event.PreventDefault() is for when you want to prevent the default behaviour of an element. For example if it's a <button> it will no longer be clickable and any handlers bound to it or onclick="" code will not be triggered.
http://api.jquery.com/event.preventdefault/
event.stopPropagation() and event.stopImmediatePropagation() are only slightly different. Along with stopping the default behaviour of the element, event.stopPropogation() and event.stopImmediatePropagation() is used when you want to preven an event from bubbling up the DOM tree, also preventing any parent handlers from being notified of the event. If you use event.stopImmediatePropagation() it will not only hault the even from executing and stop it from bubbling up to its parent elements in the dom, but also prevent any future handlers from being called upon that element. For example if it's a <button> it will no longer be clickable and you will not be able to bind future behaviour such as onclick="" at a later time without forcing a refresh of the page.
http://api.jquery.com/event.stopimmediatepropagation/
http://api.jquery.com/event.stoppropagation/
return false;
On the other hand is arguably a basic programming convention that exists in many programming langauges and Javascript is one of these languages.
Firstly, unlike the jQuery examples, it's not a function. return means to return a value (usually a variable or the output from a function). The second part is just a boolean value false.
One reason why it might get associated with the above jQuery functions is because it's frequently used in inline html code like
<a onclick="window.open(this.href); return false;" href="https://some_website.com/">Go To Website</a>
or similarly with <form> elements if you need to prevent the form from being prematurely submitted. An example would be for form validation of incomplete forms, in that case you could do something like this
function validateForm() {
var subject = document.forms["contact"]["subject"].value;
var message = document.forms["contact"]["message"].value;
var name = document.forms["contact"]["name"].value;
var email = document.forms["contact"]["email"].value;
if ( subject == null || subject == "" || subject == " " || message == null || message == "" || message == " " || name == null || name == "" || name == " " || email == null || email == "" || email == " " ) {
$('#form-incomplete').html('<strong>Please fill out all the fields before sending email</strong>');
return false;
}
}
You often see return false; used this way: as the result of an if conidition (i.e. if (some_condition_is_present) { return false; // i.e. halt your function } and that's definitely what is missing from your code. If i understand you correctly you would be wanting to try something like
<a class="some_class" href="http://some-other-website.com">WEBSITE LINK</a>
then somewhere else on the page you could have a script like:
$("a.some_class").on("click", function(e) {
e.preventDefault();
// now the link won't go to http://some-other-website.com
// but you can still bind other behavour to the element such as alert
// console log or trigger another function
});
or
$("a.some_class").on("click", function(e) {
e.stopPropogation();
// now the link won't go to http://some-other-website.com
// and the other elements of the DOM aren't aware that it's been clicked
// but we can still bind other behaviour like we could:
alert("user not directed to http://some-other-website.com");
});
or
$("a.some_class").on("click", function(e) {
e.stopPropogation();
// now the link won't go to http://some-other-website.com
// and the other elements of the DOM aren't aware that it's been clicked
// but we can't bind other behaviour to the element.
// If we try:
alert("user not directed to http://some-other-website.com");
// it no longer alerts
});
or
$("a.some_class").on("click", function(e) {
if (!foo) {
return false; // if our variable is undefined or null we can directly exit our function without executing any code
} else {
a.href = foo;
$("a.some_class").trigger("click"); // however, if our variable is defined we use that variable's value to change where the href of the <a> element will redirect the user's browswer
}
});
Using jquery I've added a change handler to a form.
This works when any input is changed BUT only if the user manually changes an input and not when some other code changes the input.
Is there any way to detect if a form has changed even if its inputs are changed by code?
Yes, there seems to be some confusion over this. In an ideal world you would expect the onchange event to happen whenever the inputs change but thats not what happens. I'm sure for good reasons to - maybe not.
One way I've overcome this obstacle is to capture the form state into a variable just after displaying it and then just before submitting it to check if the state has changed and to act accordingly.
An easy state to store is what the serialize function returns. An easy place to store the state is using the data functionality. Both serialize and data are available with jquery.
Of course you can use other different forms of state (some form of hash) or storage for this state (standard global variable for example).
Here is some prototype code:
If your form id is 'xform' then you can call the following code when the form has displayed:
$('#xform').data('serialize',$('#xform').serialize());
And then, when you need to check, for example just before a button submit you can use:
if($('#xform').serialize()!=$('#xform').data('serialize')){
// Form has changed!!!
}
You could wrap all this up into a copy & paste javascript snippet that will give you a formHasChanged() function to call wherever you need it (NOT TESTED):
$(function() {
$('#xform').data('serialize',$('#xform').serialize());
});
function formHasChanged(){
if($('#xform').serialize()!=$('#xform').data('serialize')){
return(true);
}
return(false);
}
But I'll stop here otherwise I'll create yet another jquery plugin.
Serializing the form is certainly an option, but it will not work if:
you want to know which fields have changed
it only needs to check a subset of the fields
dynamically adding or removing fields.
Fortunately, every form element has a default value associated with its object:
input, textarea : defaultValue
checkbox, radio : defaultChecked
select: defaultSelected
for ex: to ckeck if input or textarea has changed:
var changed = false;
$(":text,textarea").each(function(){
changed = this.value != this.defaultValue;
return !changed; // return if at least one control has changed value
});
This is easily achieved in JavaScript without jQuery. initChangeDetection() can be called multiple times:
function initChangeDetection(form) {
Array.from(form).forEach(el => el.dataset.origValue = el.value);
}
function formHasChanges(form) {
return Array.from(form).some(el => 'origValue' in el.dataset && el.dataset.origValue !== el.value);
}
Test on JS Bin
For older browsers that don't support newer arrow/array functions:
function initChangeDetection(form) {
for (var i=0; i<form.length; i++) {
var el = form[i];
el.dataset.origValue = el.value;
}
}
function formHasChanges(form) {
for (var i=0; i<form.length; i++) {
var el = form[i];
if ('origValue' in el.dataset && el.dataset.origValue !== el.value) {
return true;
}
}
return false;
}
Not in a regular way.
You can change with input and then trigger the change event.
$('#inputId').val('foo').trigger('change');
or with this:
$('#inputId').val('foo').change();
Here is what i did (i found my solution using zaf's answer)
$("form").change(function() {
$(this).data("changed","true");
});
$("input[type='submit']").click(function() {
if($("form").data("changed") == "true") {
var discard = confirm("Some unsaved changes. Discard them ?");
if(!discard) return false;
}
});
Try onchange attribute
According to W3c it should trigger anytime the content of an element, the selection, or the checked state have changed.
I have started using Dojo's new on module to add my events. It works fine, but now I've run into a problem. When using keypress event I can't seem to get the character value (for example "2" or "b") from the pressed key. Previously I've used the behaviormodule, and the connect module, and then I have been able to get it by using e.keyChar or e.charOrCode, but now they´re undefined.
I have an event set up like this:
on(element, 'keypress', function(e)
{
console.log(e.keyCode); //works, but not what I need
console.log(e.charOrCode); //undefined
console.log(e.keyChar); //undefined
});
How do I get the character of a pressed key when using this module?
In this case, I think what you want is to use e.keyCode in conjunction with the JS-native String.fromCharCode() in order to get the desired character value.
on(element, 'keypress', function(e) {
var character = String.fromCharCode(e.keyCode);
if (character === 'a') { // do a stuff } else { // do something else }
}