Restricting user from entering specific character in dynamically generated textboxes - javascript

I am trying to prevent user from entering two specific characters in any of the textboxes on the page. The code I am using does not work with dynamically appended textboxes.
DEMO
window.onload = function () {
$("input").keypress(function (e) {
if (e.which === 44 || e.which === 124) {//preventing , and |
e.preventDefault();
}
});
}
And since I am not using server controls I can not use ajax filter etc. I would like to have a simple solution to this. Without causing any conflicts in the code. Thank you.

Try to use event-delegation in this context, since you need to bind events for the elements which are being appended at the run time.
$(document).on('keypress',"input",function (e) {
if (e.which === 44 || e.which === 124) {
e.preventDefault();
}
});
Side Note: I just use document for delegating the event, but you should probably use any closest static parent to the input element, in order to attain a performance boos up.

use event delegation for dynamically created dom
$(document).on("keypress","input",function (e) {
if (e.which === 44 || e.which === 124) {
e.preventDefault();
}
});
document use immediate parent selector which is static in html

Demo: http://jsfiddle.net/4v78q/
http://jsfiddle.net/4v78q/1/
$(document).ready(function(){
$("input").each(function(){
$(this).keypress(function(e){
var keycode = e.which || e.keyCode;
if (keycode === 44 || keycode === 124) {
e.preventDefault();
}
});
});
});

Related

Modify a shortcut like CTRL+F in react

How do I recreate ctrl + f shortcut key in my website using react?
I want to use any shortcut to trigger a filter function?
This code may help you.
window.addEventListener("keydown",function (e) {
if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
e.preventDefault();
// trigger your filters here
}
})
You can use vanilla javascript document keyup event, e.g.:
document.onkeyup = function(e) {
if (e.ctrlKey && e.which === 70){ // CTRL+F
// Put your code here
}
}
Otherwise, if you want to use something more "react" friendly take a look into https://github.com/jaywcjlove/react-hotkeys#readme

How to Exclude Child Element from jQuery Event Handler?

I am modifying an existing web page. I added a <textarea> to the page, but found that the Enter key doesn't work as expected.
After spending considerable time searching, I found the following:
$('form').keypress(function (e) {
if (e.keyCode == 13)
return false;
});
I need to leave as much as much of the existing functionality in place as I can. But I need to disable this for my <textarea>. (It appears mine is the only <textarea> on the page.
But how can I do this? I thought about adding .not('textarea') to the selector above. But that doesn't work because the handler is on the form, which is not a textarea.
I can I exclude <textarea>s from the filter above?
jsBin demo
You can simply target the inputs
$('form input').keypress(function (e) {
if (e.which == 13) e.preventDefault(); // Don't misuse return false
});
the textarea will go on with the enter key as usual
Depends on the use-case.
If you want to be sure nothing brakes use:
$('form *:not(textarea)').keypress(function (e) {
if (e.which == 13) e.preventDefault();
});
where * targets every children, and :not selector excludes the desired one.
here's another example:
$('form *').keypress(function (e) {
if (e.which == 13 && this.tagName!=="TEXTAREA") e.preventDefault();
});
You can check the if the target is the textarea :
$('form').keypress(function (e) {
if($(e.target).is('textarea')) return;
if (e.keyCode == 13)
return false;
});
Add a filter inside your function like this
$('form').keypress(function (e) {
if (e.keyCode == 13 || e.target.tagName.toLowerCase() == 'textarea')
return false;
});
the simplest way is to use on(), so you don't need to do any extra element comparing inside the event handler:
$('form').on("keypress", ":not(textarea)", function (e) {
if (e.keyCode == 13)
return false;
});
you use on() to watch the form, and the css selector to avoid textareas.
to easily tweak later, you can blacklist other elements by tagname or class using more :not() operators sperated by commas. plus, on() is now recommended over the older single-purpose handlers anyway.

How to prevent 'pressing enter' in an input to trigger an event ? Java script

I have an input and an appended button. The click on button calls some function. But I don't want this function to be called when user 'presses enter key'. On the other hand, I want on keyup in this input to call some other function. SO I put
$(document).on('keyup', '#id', function(e){
call();//calling some function
if (e.which == 13 || event.keyCode == 13) {
e.preventDefault();//I also tried to return false
}
});
But it doesn't seem to work, someone has an idea ?
$(document).on('keyup', '#id', function(e){
if (event.keyCode != 13) {
e.preventDefault();
call();//calling some function
}
return false;
});
Try this:
$(document).on('keyup', '#id', function(e){
if (e.which == 13 || e.keyCode == 13) {
e.preventDefault();//I also tried to return false
}else{
call();//calling some function
}
});
Don't use keyup, since the form is send on keydown.
Have you tried switch .call() function to a simple alert(), just for tests purpose. #Oyeme and #Jai code seems to work properly.

Bind enter key to specific button on page

<input type="button" id="save_post" class="button" value="Post" style="cursor:pointer;"/>
How can I bind the enter key on the persons keyboard to this specific button on the page? It's not in a form, and nor do I want it to be.
Thanks!
This will click the button regardless of where the "Enter" happens on the page:
$(document).keypress(function(e){
if (e.which == 13){
$("#save_post").click();
}
});
If you want to use pure javascript :
document.onkeydown = function (e) {
e = e || window.event;
switch (e.which || e.keyCode) {
case 13 : //Your Code Here (13 is ascii code for 'ENTER')
break;
}
}
using jQuery :
$('body').on('keypress', 'input', function(args) {
if (args.keyCode == 13) {
$("#save_post").click();
return false;
}
});
Or to bind specific inputs to different buttons you can use selectors
$('body').on('keypress', '#MyInputId', function(args) {
if (args.keyCode == 13) {
$('#MyButtonId').click();
return false;
}
});
Vanilla JS version with listener:
window.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
alert('enter was pressed!');
}
});
Also don't forget to remove event listener, if this code is shared between the pages.
Maybe not quite what you're looking for but there is a HTML property that lets you assign a specific button called an access key to focus or trigger an element. It's like this:
<a href='https://www.google.com' accesskey='h'>
This can be done with most elements.
Here's the catch: it doesn't always work. for IE and chrome, you need to be holding alt as well. On firefox, you need to be holding alt and shift (and control if on mac). For safari, you need to be holding control and alt. On opera 15+ you need alt, before 12.1 you need shift and esc.
Source: W3Schools

JavaScript can't capture "SHIFT+TAB" combination

For whatever reason I can't capture "SHIFT+TAB" combination.
I am using the latest jQuery.
Same result if I use other ajax/javascript, etc.
Here is a simple example that should work as I currently understand it...
event.which or event.KeyCode are always "undefined" only shiftKey exists in a scenario involving a "SHIFT+TAB" or backward keyboard traversal, traditionally inherent in windows based apps/web or otherwise...
function ShiftTab()
{
debugger;
if(event.KeyCode == 9 && event.shiftKey) // neither this line nor the following work
// if (event.which == 9 && event.shiftKey) // shift + tab, traverse backwards, using keyboard
{
return true;
}
else
{
return false;
}
}
this seems to be yet another item related to tab order that no longer works as it traditionally worked in Microsoft.Net WinForm/WebForm based apps.
If you are using jQuery, this should be how the code is working. Make sure keyCode is lower case. Also, jQuery normalizes keyCode into which:
$(document).keyup(function (e) {
if (e.which === 9 && e.shiftKey) {
ShiftTab();
}
});
If you're into terse JavaScript:
$(document).keyup(function (e) {
e.which === 9 && e.shiftKey && ShiftTab();
});
jQuery 1.7+ on syntax:
$(document).on('keyup', function (e) {
e.which === 9 && e.shiftKey && ShiftTab();
});
I created a function which I wired up to my button's onkeydown event. I used onkeydown, because onkeypress would not capture my tab key press
function ShiftTab(evt) {
var e = event || evt; // for trans-browser compatibility
var charCode = e.which || e.keyCode; // for trans-browser compatibility
if (charCode === 9) {
if (e.shiftKey) {
$('#controlName').focus();
return false;
} else {
return true;
}
}
I took this approach to deal with two specific problems:
onkeypress would not capture tab key press
When click shift-tab, shift key press would trigger function, so I had nest the shiftkey modifier check
use same code inside keypress event.
the tab changes the element between keypress and keyup.
here we get event.key = tab and event.shiftKey = true.

Categories