We Keep Coding

Mirroring input content with non-printable chars like CTRL, ALT or shift key

When non-printable char is pressed, it's replaced with let's say for CTRL=17 with "[CTRL]".
Here is code an example
$('#textbox1').keyup(function (event) {
if (8 != event.keyCode) {
if(17==event.keyCode){
$('#textbox1').val($('#textbox1').val()+"[CTRL]")
$('#textbox2').val($('#textbox1').val());
}else{
$('#textbox2').val($('#textbox1').val());
}
} else {
$('#textbox2').val($('#textbox1').val());
}
});
the problem is when user presses backspace the second input must reflect the content of the first one, so "[CTRL]" must be deleted at once like any other chars.

You could make use of the keyCode and/or in combination with charCode (if required). Basic idea would be:
Create a map of all required key codes in an array/object
Handle event for say keydown and listen for keycode
Look for the keycode in your map and if found show it
prevent the default (to prevent e.g. say backspace browsing back)
If not found in map, let the character go thru as usual.
A very basic example:
Demo: http://jsfiddle.net/abhitalks/L7nhZ/
Relevant js:
keyMap = {8:"[Backspace]",9:"[Tab]",13:"[Enter]",16:"[Shift]",17:"[Ctrl]",18:"[Alt]",19:"[Break]",20:"[Caps Lock]",27:"[Esc]",32:"[Space]",33:"[Page Up]",34:"[Page Down]",35:"[End]",36:"[Home]",37:"[Left]",38:"[Up]",39:"[Right]",40:"[Down]",45:"[Insert]",46:"[Delete]"};
$("#txt").on("keydown", function(e) {
// check if the keycode is in the map that what you want
if (typeof(keyMap[e.keyCode]) !== 'undefined') {
// if found add the corresponding description to the existing text
this.value += keyMap[e.keyCode];
// prevent the default behavior
e.preventDefault();
}
// if not found, let the entered character go thru as is
});
Edit: (as per the comments)
The concept remains the same, just copying the value to the second input:
Demo 2: http://jsfiddle.net/abhitalks/L7nhZ/3/
$("#txt1").on("keyup", function(e) {
if (typeof(keyMap[e.keyCode]) !== 'undefined') {
this.value += keyMap[e.keyCode];
e.preventDefault();
}
$("#txt2").val(this.value); // copy the value to the second input
});
Regarding deletion of the description, I could not get it done by caching the last inserted descrition from the map. Somehow, I kept struggling with the regex with a variable. Anyway, a simpler solution is to just add another event handler for keyup with hard-coded map.
Thanks to #serakfalcon for (that simple solution), which we are using here:
$('#txt1').keydown(function(event) {
if(8 == event.keyCode) {
var el = $(this);
el.val(el.val().replace(/\[(Tab|Enter|Shift|Ctrl|Alt|Break|Caps Lock|Esc|Space|Page (Up|Down)|End|Home|Left|Up|Right|Down|Insert|Delete)\]$/,' '));
$("#txt2").val(el.val());
}
});

You can check in the keydown for the last character in the input field. If it's a ] you can remove everything from the right to the last found opening bracket [. Unfortunatly this does not work if you're cursor is inside '[ ]'.
$('#textbox1').keydown(function(event) {
if(8 == event.keyCode) {
var element = $(this),
value = element.val(),
lastChar = value.slice(-1);
if(lastChar == ']') {
var lastIndex = value.lastIndexOf('['),
index = value.length - lastIndex;
element.val(value.slice(0, -index) + "]");
}
}
});
Fiddle

you can always use a regex.
$('#textbox1').keydown(function(event) {
if(8 == event.keyCode) {
var el = $(this);
el.val(el.val().replace(/\[(CTRL|ALT|SHIFT)\]$/,' '));
}
});
fiddle
Edit: combined with abhitalks code

jquery mobile - keyup keydown on mobile devices

I have a need for an input (type='text') to go send results to the my server to check availability of something typed by the user.
I use the delegate to add the event handlers to the elements:
$(document).delegate('#signup', 'pageshow', function() {
var keydown = function(e) {
e = e || window.event;
var char = e.which || e.keyCode;
if (char == 8) {
$(".pagemessage").text("Pressed: '<BACKSPACE>'");
appcheckDomainOnKeyDown();
}
return true;
};
var keyup = function(e) {
e = e || window.event;
var char = e.which || e.keyCode;
if (char == 8) {
appcheckDomainOnKeyUp();
}
return true;
};
var keypress = function(e) {
e = e || window.event;
var char = e.which || e.keyCode;
var str = String.fromCharCode(char);
$(".pagemessage").text("Pressed: '" + str +"'");
if (/[a-zA-Z0-9-\._]/.test(str) || char == 8 || char == 9) {
appcheckDomainOnKeyDown();
appcheckDomainOnKeyUp();
return true;
}
return false;
};
The key handers work perfectly on my desktop but not on a mobile device. Hopefully you can see that I'm trying to allow certain characters into the box (and a backspace to delete the characters.
From the fact I cannot see the pagemessage element update, 'keypress' does not seem to be trapped. I tried handling this in the keyup/keydown, but I'm not sure how to apply the shiftKey bits to get an actual character pressed - for example pressing + 5 would give '%' however in the keydown it returns shiftKey and 5.
I read the documentation and the closest I could find to 'keypress' was a 'tap' event, but that didn't work either.
I have tried trapping the 'keypress' event as suggested in one post here, and on a desktop this does not trap the backspace, and does nothing at all on a mobile device.
I then tried this as suggested in another post:
var inputEV = 'oninput' in window ? 'input' : 'keyup';
$("#new_domain").off(inputEV);
$("#new_domain").on(inputEV, function (e) {
keydown(e);
keyup(e);
});
and it does not work in either desktop browser or mobile device.
I then tried changing the input type to 'search', and I get a pretty enhancement, that a keypress does add a clear button... but does nothing on the mobile device regarding my own functionality.
I think I have run out of things to try, the only thing left is to add a button to go check - and no one wants that :)
Anyone know how I can do what I need?
In case it's relevant, I'm using chrome on my desktop and android device (HTC one, and Nexus 5)

Keyup should work. It works in this example: http://jsbin.com/aNEBIKA/2/. That tested find on my Galaxy S3. Each keypress updates the footer h3 element with the text entered.
Could it be that you are binding your listeners at the wrong time? The documentation does suggest binding like this:
$(document).bind('pageinit')
http://demos.jquerymobile.com/1.2.0/docs/api/events.html

How can I disable text selection using shift without disabling all text selection?

So I know this sounds like a duplicate, but it isn't (or if it is, the accepted answer on all the ones I can find doesn't work the way I need it to). The issue is this:
I'm writing in HTML5 using jQuery, I need to make a grid allow multi-select with control and shift. I have that logic working, but whenever you shift-click it selects the text in the grid. I want to prevent this selection, but here's the critical difference between this and the other questions I found: I want selection of text to work at all other times.
To restate: I want to disable text selection using shift WITHOUT disabling all text selection for the elements specified. Does anyone know how I can do that?
-- EDIT --
The following (in the constructor for the grid) solved this for me. As the answerer suggested, I declared a class for unselectability.
this.gridBody = $("#userGrid");
var handleKeydown = function(e)
{
e = e || window.event;
var keyPressed = e.keyCode || e.which;
if (keyPressed == keys.shift) {
e.data.gridBody.addClass("unselectable");
}
};
var handleKeyup = function(e)
{
e = e || window.event;
var keyPressed = e.keyCode || e.which;
if (keyPressed == keys.shift) {
e.data.gridBody.removeClass("unselectable");
}
};
$(document).on('keydown', this, handleKeydown);
$(document).on('keyup', this, handleKeyup);

That will bind on document an event where it disables text selection upon pressing DOWN shift
document.onkeydown = function(e) {
var keyPressed = e.keyCode;
if (keyPressed == 16) { //thats the keycode for shift
$('html').css({'-moz-user-select':'-moz-none',
'-moz-user-select':'none',
'-o-user-select':'none',
'-khtml-user-select':'none',
'-webkit-user-select':'none',
'-ms-user-select':'none',
'user-select':'none'
}); //or you could pass these css rules into a class and add that class to html instead
document.onkeyup = function() {
//here you remove css rules that disable text selection
}
}
}
Hopefully i have helped you.
Based on comments
document.onkeydown = function(e) {
var keyPressed = e.keyCode;
if (keyPressed == 16) { //thats the keycode for shift
$('html').addClass('unselectable'); //unselectable contains aforementioned css rules
document.onkeyup = function() {
$('html').removeClass('unselectable'); //and simply remove unselectable class making text selection availabe
}
}
}

Another solution you might consider: instead of preventing text selection by watching for shift keys and toggling selectability, you could just clear the text selection.
window.getSelection().removeAllRanges();
I find this more convenient because it can be run in your click handler to "cancel" the default behavior. Appears to work in IE 9+ and other modern browsers.

Preventing ckeditor to display character on keypress

I have a CKEditor 3.0 instance 'editor' and on its 'key' event a listener is attached so that when that function is returning false it should not type that key character on editor, that is if key 'k' is pressed it should not be displayed on the editor if the function is returning false
editor.on('key', function(e)
{
alert(""+e.data.keyCode);
return false;
});
I used above code for this but it is not working, means the character is getting typed on the editor
Trying the same using a plugin where on keypress of keycode 65 the other language character should show up instead of english language character.
CKEDITOR.plugins.add( 'typing',
{
init: function( editor )
{
editor.addCommand( 'insertcharacter',
{
exec : function( editor )
{
alert(editor.id);
alert(editor.name);
editor.on('key', function(e)
{
alert("Hello"+e.data.keyCode);
if(e.data.keyCode == 65)
{
editor.insertText('Other Language Character');
}
return false;
});
}
});
can u suggest me any solution for this.
Thanks

found the answer recently. this worked for me in the latest version(4.x).
editor.document.on('keypress', function(e) {
e.data.preventDefault(); // this will prevent the default action for any event
//your code goes here
});

In v4 you can use editor.on('key') and cancel() the event when the appropriate key is pressed.
So to ignore k keypresses,
editor.on('key', function(evt) {
var keyCodeToIgnore = 'K'.charCodeAt(); // Upper case K. Only one k key.
var pressedKeyCode = evt.data.keyCode;
if ( pressedKeyCode === keyCodeToIgnore ) {
evt.cancel();
}
}
(That wouldn't prevent 'k's being added by other means, of course, such as pasting.)
See http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-key
You can also configure the editor to block specified keystrokes. Using that you can specify case. So to ignore k and not K:
config.blockedKeystrokes = [75]; // To ignore k and K: [75, 107]
Though you'd probably want to keep the default blockedKeystrokes as well.
See http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-blockedKeystrokes
The first method lets you do other stuff of course. You could drive people crazy by ignoring a 'u' if the previous keypress was a 'q', for example.

use following code before return from function to Cancel/block the character/event.
e.cancelBubble = true;
e.returnValue = false;
e.cancel();
e.stop();
return false;
where e is in parameter of function

I came looking for a way to bind something to the the enter key press. Except I'm using contenteditable div tags, and maybe that made the above solutions not work for me.
However I came to this, that seems to be working perfectly
$(function () {
CKEDITOR.instances['<the DOM ID of your element>'].on('key', function (e) {
if (e.data.keyCode === 13) {
//yeet
e.cancel();
}
});
});

Input validation in the keydown event

I'm attempting to do info validation against user text input in the process of keydown event. The reason that I am trying to validate in the keydown event is because I do not want to display the characters those that are considered to be illegal in the input box at the beginning.
The validation I am writing is like this,
function validateUserInput(){
var code = this.event.keyCode;
if ((code<48||code>57) // numerical
&&code!==46 //delete
&&code!==8 //back space
&&code!==37 // <- arrow
&&code!==39) // -> arrow
{
this.event.preventDefault();
}
}
I can keep going like this, however I am seeing drawbacks on this implementation. Those are, for example:
Conditional statement become longer and longer when I put more conditions to be examined.
keyCodes can be different by browsers.
I have to not only check what is not legal but also have to check what are exceptional. In above examples, delete, backspace, and arrow keys are exceptional.
But the feature that I don't want to lose is having not to display the input in the textarea unless it passes the validation. (In case the user try to put illegal characters in the textarea, nothing should appear at all) That is why I am not doing validation upon keyup event.
So my question is:
Are there better ways to validate input in keydown event than checking keyCode by keyCode?
Are there other ways to capture the user inputs other than keydown event before browser displays it? And a way to put the validation on it?

If you're checking a printable key, which is exactly what you seem to be doing, you should use the keypress event instead, since that's the only place you're going to be able to get reliable information about the character the keypress represents. You can't detect numeric keypresses reliably in the keydown event. Also, it's a bad idea to suppress arrow keys and delete/backspace keys. What do you gain from doing that?
There's also some errors: in Firefox, you'll need to get the Event object from the parameter passed into the event handler function, and if you're using a DOM0 event handler function rather than addEventListener() or attachEvent(), you should use return false; to suppress default behaviour. Here's my recommended code:
var input = document.getElementById("your_input_id");
input.onkeypress = function(evt) {
evt = evt || window.event;
var charCode = evt.which || evt.keyCode;
var charStr = String.fromCharCode(charCode);
if (/\d/.test(charStr)) {
return false;
}
};

I don't think you need the preventDefault part. If you want to catch keys (by event.keyCode, or combinations using for example event.ctrlKey + event.keyCode), you check if the keyCode is allowed. If it is, simply return true, otherwise return false. If you return false, the key input will not be written to the input field, otherwise it will.
I can't think of better ways to then using keyCode. You can use String.fromCharCode([keyCode]) if you want to check for specific character values, but it keeps boiling down to some loop to check the keyCodes you want to validate. May be a switch ... case could offer a bit more readability.
Here's a piece of code from a keydown event handler I use (just for demonstration, it doesn't actually do anything):
function handleKey(e, thisFld) {
thisFld = (thisFld || this);
e = e || event;
if (!e) {
return true;
}
var isCtrl = e.ctrlKey,
isShift = e.shiftKey,
isAlt = e.altKey,
kc = e.keyCode || e.which,
codes = [27, 38, 40],
keys = {
escape: 27,
up: 38,
down: 40,
ins: 45,
del: 46,
one: 49
};
if (isCtrl && kc === keys.del) { ... }
if (isAlt && kc === keys.ins) { ... }
//etc
return true;
}

here's a fiddle that you can play with and may provide more insight.
jsfiddle: keydown/keypress demo w/ info display
It would appear that the latest browsers use preventDefault(). The code below is similar to what i put on jsfiddle but is standalone and can be pasted into an html file that you can access locally to test (note it's mobile friendly for device testing.
<html>
<head>
<meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, user-scalable=no"/>
<style>
.b {color:blue;}
.r {color:red;}
input {font-size:18px;}
</style>
<script>
function byId(el) {return document.getElementById(el)}
function sfcc (n) {return String.fromCharCode(n);}
function foo(event) {
var he='&#x'+event.keyIdentifier.split('+')[1]+';';
var html=''
var cn=event.target.className;
html+='kc: [<span class="b">'+sfcc(event.keyCode)+'</span>] ';
html+='wh: [<span class="b">'+sfcc(event.which)+'</span>] ';
html+='he: [<span class="b">'+he+'</span>]<br>';
for (i in event)
if (["string","boolean","number"].indexOf(typeof event[i]) >-1 && i.toUpperCase()!=i)
html+='<span>'+i + '</span>: [<span class="r">'+event[i]+'</span>]<br>';
byId('kc').innerHTML=html;
switch (cn) {
case "pd": event.preventDefault(); return;
case "rf": return false;
}
}
</script>
</head>
<body>
kp/pd: <input class="pd" type="text" onkeypress="foo(event)"/><br>
kp/rf: <input class="rf" type="text" onkeypress="foo(event)"/><br>
kd/pd: <input class="pd" type="text" onkeydown="foo(event)"/><br>
kd/rf: <input class="rf" type="text" onkeydown="foo(event)"/><br>
<div id="kc"></div>
</body>
</html>

So, I've found that keypress is great for printable characters, and keydown for all the rest. You can check the event.charCode on keypress for printable characters (it should be 0 for non-printable).
You can use event.keyCode on keydown for arrows and such.
This is how I just got an autocomplete to work in Chrome and Firefox.