I have a textarea inside which you can only input characters using on-screen buttons, so the textarea editing by keyboard is disabled. But I would like to allow the user to delete what he has input, using the backspace stroke. Is there a way to do this in Javascript?
It's quite easy to selectively enable keys. Just add a key listener and preventDefault when it's a key you don't want:
myInputElement.addEventListener( 'keydown', function( e ) {
// console.log( e.keyCode ); // for finding key codes by trying them
if( e.keyCode >= 37 && e.keyCode <= 40 ) {
return; // arrow keys
}
if( e.keyCode === 8 || e.keyCode === 46 ) {
return; // backspace (8) / delete (46)
}
e.preventDefault( );
}, false );
(example fiddle: http://jsfiddle.net/tnayV/)
Another example allowing only backsapce:
document.getElementById('mytextarea').addEventListener('keydown', function(e){
if (e.which != 8){
e.preventDefault();
return false;
}
}, false);
example
Related
I would like a system administrator to easily create new accounts in an application. I was thinking keys alt and shift would trigger the "Create New User" button or defaultButton2 in my application. I can get one key to work, but combining both keys doesn't seem to work.
$(document).ready(function () {
$("input").bind("keydown", function (event) {
var keycode = (event.keyCode ? event.keyCode :
(event.which ? event.which : event.charCode));
if (keycode == 16 && keycode == 18) {
document.getElementById('defaultButton2').click();
return false;
} else {
return true;
}
});
});
The keydown event (mdn) has booleans for the shiftkey, altkey and control key to detect when combinations of buttons are pressed. You can therefore just check those. The keyCode is only for the last key pressed.
If you want to detect other keys, e.g. if "a" and "s" are pressed at the same time, you need to mess around with custom keydown and keyup events and track things yourself.
$('body').on( 'keydown', function(e) {
if( e.altKey && e.shiftKey ) {
console.log( "Both pressed!" );
}
} );
body {
background-color: #DDDDDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click Here
You almost did it right...
$(document).ready(function(){
$("input").keydown(function(e) {
// 18 is the key for alt
if(e.keyCode == 18 && e.shiftKey) {
$("button").click();
}
});
});
Here is a working JSFiddle and if you're looking for the JS keycodes have a look here.
Well, i have such-like code that prevent "select all" action from keyboard:
$(document).keydown(function(e){
// CTRL key
if ( e.which == '17' || e.which == '224' ){
window.isCtrlHold = true;
}
// A key
// Prevent from select all from a page ( ctrl + a )
if ( e.which == '65' && window.isCtrlHold ){
e.preventDefault();
}
});
Another script called from another place that escape preventing off preview code:
$('input').focus(function(){
window.inSearch = true;
});
$(document).keydown(function(e){
// A ( "ctrl + a" if focus within text input )
if ( e.which == '65' && window.isCtrlHold && window.inSearch ){
// some code that do defult action eg "e.doDefault();"
}
});
In the end, i need to prevent "ctrl+a" (select all) while focus not within input[type=text] and allow to select all if focus within input.
I think you're approaching this the wrong way, just update your first code to be like this
$(document).keydown(function(e){
// CTRL key
if ( e.which == '17' || e.which == '224' ){
var isCtrlHold = true; //(note 1)
}
// A key
// Prevent from select all from a page ( ctrl + a )
if ( e.which == '65' && isCtrlHold && window.inSearch){
e.preventDefault();
}
});
Notice the && window.inSearch.
Now you can remove this block of your code
$(document).keydown(function(e){
// A ( "ctrl + a" if focus within text input )
if ( e.which == '65' && window.isCtrlHold && ! window.inSearch ){
// some code that do defult action eg "e.doDefault();"
}
});
Edit: I've noticed more errors in your code
Note1: isCtrlHold shouldn't be global, because clicking Ctrl (without holding) will make it true for ever (life of the page). Try to tap control (no holding) and then try to type a.
Note2: you should also add something like this:
$('input').blur(function(){
window.inSearch = false;
});
or else your script will always think that the serachbox is in focus even though it isn't.
Note3: There's no "opposite" of preventDefault();, you either prevent default behavior or you don't.
I'm working on a textfield working with the kind of validation that wouldn't let you enter other than numeric values. As so, my initial code looked quite simple and similar to this:
$(textField).onKeyPress(function(e) {
if (e.which < 48 && e.which > 57)
e.preventDefault();
});
This is fairly strightforward, but turns that (in the latest version of all browsers) Firefox will make this also prevent movement with the arrow keys and delete/backspace keys, whereas the other browsers would not.
Looking around I found that I would need to also check for these keys, and check for different properties exposed in the e event reference.
My final code looks something like this:
$(textField).onKeyPress(function(e) {
var code = e.which || e.keyCode;
if (code > 31 // is not a control key
&& (code < 37 || code > 40) // is not an arrow key
&& (code < 48 || code > 57) // is not numeric
&& (code != 46) // is not the delete key
)
e.preventDefault();
});
However, this feels to be too much to solve a fairly simple problem as just preventing non-numeric.
What am I doing wrong? Which is the best practice in terms of this kind of validation?
We'll respond to both keypresses, and the blur event. When somebody press a key, we check to see if the key entered is a number. If it is, we permit it. Otherwise, we prevent it.
If the field is blurred, we remove any non-numerical values, and all those values that follow. This will prevent the user from pasting in non-numerical strings:
$("#textfield").on("keypress blur", function(e){
if ( e.type === "keypress" )
return !!String.fromCharCode(e.which).match(/^\d$/);
this.value = this.value.replace(/[^\d].+/, "");
});
Demo: http://jsfiddle.net/jonathansampson/S7VhV/5/
Working demo http://jsfiddle.net/Pb2eR/23/ Updated Copy/Paste demo: http://jsfiddle.net/Pb2eR/47/ (In this demo wit you copy paste string with characters it won't allow else it will allow number to be copy pasted: tested in safari)
Demo for arrow key to work http://jsfiddle.net/gpAUf/
This will help you.
Note: in this version even if you copy paste it will set it to empty input box, tested in safari lion osx :)
Good Link: [1] How to allow only numeric (0-9) in HTML inputbox using jQuery?
code
$(".hulk").keyup(function(){
this.value = this.value.replace(/[^0-9\.]/g,'');
});
html
<input type="text" class="hulk" value="" />
Update for copy paste stuff
$(".hulk").keyup(function(){
this.value = this.value.replace(/[^0-9\.]/g,'');
});
$(".hulk").bind('input propertychange', function() {
this.value = this.value.replace(/[^0-9\.]/g,'');
});
code from another demo
$(".hulk").bind('input propertychange', function(event) {
if( !(event.keyCode == 8 // backspace
|| event.keyCode == 46 // delete
|| (event.keyCode >= 35 && event.keyCode <= 40) // arrow keys/home/end
|| (event.keyCode >= 48 && event.keyCode <= 57) // numbers on keyboard
|| (event.keyCode >= 96 && event.keyCode <= 105)) // number on keypad
) {
event.preventDefault(); // Prevent character input
}
this.value = this.value.replace(/[^0-9\.]/g,'');
});
this will allow both int.
it also removes text if user copy and paste with mouse.
$(document).ready(function () {
$('#textfield').bind('keyup blur', function (e) {
if (e.type == 'keyup') {
if (parseInt($(this).val()) != $(this).val()) {
$(this).val($(this).val().slice(0, $(this).val().length - 1));
}
} else if (e.type == 'blur') {
$(this).val('');
}
});
});
I have a button in HTML and I want to provide a shortcut key to it, which should run the functionality as when button clicks what happens.
Is it possible to do something like this using JavaScript or jQuery.
You can do this using plain HTML: accesskey="x". Then you can use alt+x (depending on the browser though if it's alt or something else)
Untested:
$("body").keypress(function(event) {
if ( event.which == 13 ) { // put your own key code here
event.preventDefault();
$("#yourbutton").click();
}
});
It's pretty easy using jQuery. To trigger a button:
$('#my-button').trigger('click');
To monitor for keypress:
$(window).keypress(function (event) {
if (event.which === 13) { // key codes here: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
event.preventDefault();
$('#my-button').trigger('click');
}
});
Now, if you want to use the Ctrl key or similar you use
if (event.which === 13 && event.ctrlKey)
and similar with event.altKey, event.shiftKey.
$(document).on('keypress', function (e) {
if (e.keyCode === youreKeyCodeHere) {
// if (e.keyCode === youreKeyCodeHere && e.shiftKey === ture) { // shift + keyCode
// if (e.keyCode === youreKeyCodeHere && e.altKey === ture) { // alt + keyCode
// if (e.keyCode === youreKeyCodeHere && e.ctrlKey === ture) { // ctrl + keyCode
$('youreElement').trigger('click');
}
});
Where youreKeyCode can be any of the following javascript char codes , if you're shortcut needs an alt (shift, ctrl ...) use the commented if's . youreElement is the element that holds the click event you whant to fire up.
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.