How to record timing for keypress event? - javascript

I am trying to build a small script that shows, on call back, when I press key q then after one second I press w it should show q and w obviously, BUT When, I press q and then w not at the same time, just in less than one second, it should show other single character for ex: x and this is where I am stuck currently JsFIDDLE or my full code.
<script type="text/javascript">
function check(e){
var text = e.keyCode ? e.keyCode : e.charCode;
switch(text){
case 81:
text = 'q';
break;
case 87:
text = 'w';
break;
}
if(text == 8){
var str = document.getElementById("out").innerHTML;
var foo = str.substring(0, str.length -1);
document.getElementById("out").innerHTML = foo;
}else {
document.getElementById("out").innerHTML += text;
}
}
</script>
<input type='text' onkeyup='check(event);' id='in' />
<div id='out' ></div>
I am new to JavaScript, and I am lost as to what lets you record one key press then wait to listen if there is another one existing even inside a second. I have tried also, setInterval() function, but that only executes a function by amount of time it is given.

I think this is what you need:
var timer = new Date(),
previousChar;
function check (e) {
var foo,
text = e.keyCode ? e.keyCode : e.charCode,
out = document.getElementById('out'),
str = out.innerHTML;
switch (text) {
case 81: text = 'q'; break;
case 87: text = 'w'; break;
}
if (new Date() - timer < 1000 && text === 'w' && previousChar === 'q') {
text = 'x';
out.innerHTML = str.substring(0, str.length - 1);
}
if (text === 8) {
foo = str.substring(0, str.length - 1);
out.innerHTML = foo;
} else {
out.innerHTML += text;
}
previousChar = text;
timer = new Date();
return;
}
A live demo at jsFiddle.
EDIT
Since you've added some more requirements via the comments, here's an edited code for the task:
var timer = new Date(),
keyCombinations = {
ae: 'ä',
oe: 'ö',
qw: 'x'
};
function check(e){
var text, str, previousKeys,
key = e.keyCode || e.charCode,
out = document.getElementById('out');
text = String.fromCharCode(key);
str = out.innerHTML + text;
previousKeys = str.substring(str.length - 2, str.length);
if (new Date() - timer < 1000) {
if (previousKeys in keyCombinations) {
str = str.substring(0, str.length - 2) + keyCombinations[previousKeys];
}
}
out.innerHTML = str;
timer = new Date();
return;
}
Notice, that this code is for onkeypress event. It's more reliable when creating characters from keycodes. You can assign a separate eventhandling for the special keys, like backspace, within onkeyup handler function.
This is not a perfect code, but it gives you an idea, how to implement this task. It uses an object literal to store all key combinations and their replacements. This way you don't need to write any loop at all.
A live example at jsFiddle.

Here goes: If q has been pressed you got one second to get a 'w' otherwise you'll get an 'x'. Is this what you want? (Tried to make it as easy as possible to read, preferrably you'd refactor it a little :)
var openToW = false;
function check(e){
var text = e.keyCode ? e.keyCode : e.charCode;
if(text==81){
openToW=true;
document.getElementById("out").innerHTML='q';
setInterval(lock,1000);
}
if(text==87){
if(!openToW){
document.getElementById("out").innerHTML = 'x';
return;
}
else{
document.getElementById("out").innerHTML='w';
}
}
}
function lock(){
openToW=false;
}

Related

How do I know, via key event code, if the character just entered in a <textarea> is lower or upper case?

I'm trying to capture the character just entered into a <textarea>, but I can only get which key is pressed via key event like keydown or keyup, not knowing if it's lower case or upper case.
For example, when I input A or a, the event key codes for keydown are all 65.
I thought of using val() to get the string in the <textare> and get the last character of it, but that is too slow and memory consuming, since I want to record every keyboard event while the user is typing.
So is there a way I can simply get the last entered character?
Try this:
var p = $('#log')[0];
$("#textarea").on("keypress", function(e) {
p.textContent = '';
var k = e.keyCode || e.which;
var character = String.fromCharCode(k);
if (!isNaN(character * 1)) {
p.textContent += 'character is numeric';
} else {
if (character == character.toUpperCase()) {
p.textContent += 'UPPER case true';
}
if (character == character.toLowerCase()) {
p.textContent += 'lower case true';
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="textarea"></textarea>
<p id="log"></p>
I see what you mean about the shiftKey
var myObj = $('#myTextarea');
function isLetter(char){
if ((char.toLowerCase() !== char) || (char.toUpperCase() !== char)) {
return true;
}
return;
}
myObj.keypress(function( event ){
var text = myObj.val();
var char = text.charAt(text.length-1);
if (!event.shiftKey && isLetter(char)) {
if (char == char.toUpperCase()) {
console.log('Upper');
}
if (char == char.toLowerCase()) {
console.log('Lower');
}
}
});
try:
<textarea id="area1"></textarea>
window.onload = function () {
document.getElementById("area1").onkeypress = function(event){
var code = event.which;
if ((code >= 65) && (code <= 90)) {
alert('Upper');
}
else if ((code >= 97) && (code <= 122)) {
alert('Lower');
}
}
}

Convert first letter to uppercase on input box

JS Bin demo
This regex transform each lower case word to upper case. I have a full name input field. I do want the user to see that each word's first letter he/she pressed is converted to uppercase in the input field.
I have no idea how to properly replace the selected characters in the current input field.
$('input').on('keypress', function(event) {
var $this = $(this),
val = $this.val(),
regex = /\b[a-z]/g;
val = val.toLowerCase().replace(regex, function(letter) {
return letter.toUpperCase();
});
// I want this value to be in the input field.
console.log(val);
});
Given i.e: const str = "hello world" to become Hello world
const firstUpper = str.substr(0, 1).toUpperCase() + str.substr(1);
or:
const firstUpper = str.charAt(0).toUpperCase() + str.substr(1);
or:
const firstUpper = str[0] + str.substr(1);
input {
text-transform: capitalize;
}
http://jsfiddle.net/yuMZq/1/
Using text-transform would be better.
You can convert the first letter to Uppercase and still avoid the annoying problem of the cursor jumping to the beginning of the line, by checking the caret position and resetting the caret position. I do this on a form by defining a few functions, one for all Uppercase, one for Proper Case, one for only Initial Uppercase... Then two functions for the Caret Position, one that gets and one that sets:
function ProperCase(el) {
pos = getInputSelection(el);
s = $(el).val();
s = s.toLowerCase().replace(/^(.)|\s(.)|'(.)/g,
function($1) { return $1.toUpperCase(); });
$(el).val(s);
setCaretPosition(el,pos.start);
}
function UpperCase(el) {
pos = getInputSelection(el);
s = $(el).val();
s = s.toUpperCase();
$(el).val(s);
setCaretPosition(el,pos.start);
}
function initialCap(el) {
pos = getInputSelection(el);
s = $(el).val();
s = s.substr(0, 1).toUpperCase() + s.substr(1);
$(el).val(s);
setCaretPosition(el,pos.start);
}
/* GETS CARET POSITION */
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == 'number' && typeof el.selectionEnd == 'number') {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
// Create a working TextRange that lives only in the input
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
// Check if the start and end of the selection are at the very end
// of the input, since moveStart/moveEnd doesn't return what we want
// in those cases
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;
}
}
}
}
return {
start: start,
end: end
};
}
/* SETS CARET POSITION */
function setCaretPosition(el, caretPos) {
el.value = el.value;
// ^ this is used to not only get "focus", but
// to make sure we don't have it everything -selected-
// (it causes an issue in chrome, and having it doesn't hurt any other browser)
if (el !== null) {
if (el.createTextRange) {
var range = el.createTextRange();
range.move('character', caretPos);
range.select();
return true;
}
else {
// (el.selectionStart === 0 added for Firefox bug)
if (el.selectionStart || el.selectionStart === 0) {
el.focus();
el.setSelectionRange(caretPos, caretPos);
return true;
}
else { // fail city, fortunately this never happens (as far as I've tested) :)
el.focus();
return false;
}
}
}
}
Then on document ready I apply a keyup event listener to the fields I want to be checked, but I only listen for keys that can actually modify the content of the field (I skip "Shift" key for example...), and if user hits "Esc" I restore the original value of the field...
$('.updatablefield', $('#myform')).keyup(function(e) {
myfield=this.id;
myfieldname=this.name;
el = document.getElementById(myfield);
// or the jquery way:
// el = $(this)[0];
if (e.keyCode == 27) { // if esc character is pressed
$('#'+myfield).val(original_field_values[myfield]); // I stored the original value of the fields in an array...
// if you only need to do the initial letter uppercase, you can apply it here directly like this:
initialCap(el);
} // end if (e.keyCode == 27)
// if any other character is pressed that will modify the field (letters, numbers, symbols, space, backspace, del...)
else if (e.keyCode == 8||e.keycode == 32||e.keyCode > 45 && e.keyCode < 91||e.keyCode > 95 && e.keyCode < 112||e.keyCode > 185 && e.keyCode < 223||e.keyCode == 226) {
// if you only need to do the initial letter uppercase, you can apply it here directly like this:
initialCap(el);
} // end else = if any other character is pressed //
}); // end $(document).keyup(function(e)
You can see a working fiddle of this example here: http://jsfiddle.net/ZSDXA/
Simply put:
$this.val(val);
$(document).ready(function() {
$('input').on('keypress', function(event) {
var $this = $(this),
val = $this.val();
val = val.toLowerCase().replace(/\b[a-z]/g, function(letter) {
return letter.toUpperCase();
});
console.log(val);
$this.val(val);
});
});
As #roXon has shown though, this can be simplified:
$(document).ready(function() {
//alert('ready');
$('input').on('keypress', function(event) {
var $this = $(this),
val = $this.val();
val = val.substr(0, 1).toUpperCase() + val.substr(1).toLowerCase();
$this.val(val);
});
});
An alternative, and better solution in my opinion, would be to only style the element as being capitalized, and then do your logic server side.
This removes the overhead of any javascript, and ensures the logic is handled server side (which it should be anyway!)
$('input').on('keyup', function(event) {
$(this).val(function(i, v){
return v.replace(/[a-zA-Z]/, function(c){
return c.toUpperCase();
})
})
});
http://jsfiddle.net/AbxVx/
This will do for every textfield call function on keyup
where id is id of your textfield and value is value you type in textfield
function capitalizeFirstLetter(value,id)
{
if(value.length>0){
var str= value.replace(value.substr(0,1),value.substr(0,1).toUpperCase());
document.getElementById(id).value=str;
}
}
only use this This work for first name in capital char
style="text-transform:capitalize;
Like
<asp:TextBox ID="txtName" style="text-transform:capitalize;" runat="server" placeholder="Your Name" required=""></asp:TextBox>
$('.form-capitalize').keyup(function(event) {
var $this = $(this),
val = $this.val(),
regex = /\b[a-z]/g;
val = val.toLowerCase().replace(regex, function(letter) {
return letter.toUpperCase();
});
this.value = val;
// I want this value to be in the input field.
console.log(val);
});

Allows only one "." in Javascript during KeyPress

How to allow only one "." in javascript during Keypress?
I have a code here:
function allowOneDot(txt) {
if ((txt.value.split(".").length) > 1) {
//here, It will return false; if the user type another "."
}
}
I will reiterate what I said in my comment before the answer:
And what if the user pastes in a bunch of periods? What if they edit the javascript in their console to completely ignore this check? Make sure you are handling validation correctly and not making too many simplifications.
Now that we're proceeding at our own risk, here's how you would not allow a user typing more than one . (period) in a textbox:
document.getElementById('yourTextboxIDHere').onkeypress = function (e) {
// 46 is the keypress keyCode for period
// http://www.asquare.net/javascript/tests/KeyCode.html
if (e.keyCode === 46 && this.value.split('.').length === 2) {
return false;
}
}
Working demo
If you really want to allow one dot, even in the event of a user pasting text inside it, you should use keyup, not keypress, and you could keep your last text value in case you need to restore it.
The drawback though, is that the input value will have already been changed, and you will see it getting corrected as you type.
(function() {
var txt = document.getElementById('txt');
var prevValue = txt.value;
function allowOneDot(e) {
var dots = 0;
var length = txt.value.length;
var text = txt.value;
for(var i=0; i<length; i++) {
if(text[i]=='.') dots++;
if(dots>1) {
txt.value = prevValue;
return false;
}
}
prevValue = text;
return true;
}
txt.onkeyup = allowOneDot;
})();
I solved this question for the multipurpose use of decimal, number & alphanumeric field types.
For field types 'number' and 'alphanum', parameter l (lower L) is the string length allowed. For type 'decimal', it specifies the allowed number of decimal places.
function allowType(e, o = 'number', l = false) {
let val = e.target.value;
switch (o) {
case 'alphanum':
if (l) {
val = val.substr(0, l).replaceAll(/[^0-9a-zA-Z]/gmi, '');
} else {
val = val.replaceAll(/[^0-9a-zA-Z]/gmi, '');
}
break;
case 'number':
if (l) {
val = val.substr(0, l).replaceAll(/[^0-9]/gmi, '');
} else {
val = val.replaceAll(/[^0-9]/gmi, '');
}
break;
case 'decimal':
let i = val.search(/\./gmi);
if (val.length === 1) {
val = val.replaceAll(/[^0-9]/gmi, '');
}
if (i >= 0) {
if (l) {
val = val.substr(0, i + 1) + val.substr(i).substr(0, l + 1).replaceAll(/\./gmi, '');
} else {
val = val.substr(0, i + 1) + val.substr(i).replaceAll(/\./gmi, '');
}
}
val = val.replaceAll(/[^0-9.]/gmi, '');
break;
}
e.target.value = val;
}
<input type="text" oninput="allowType(event, 'decimal', 2)" placeholder="decimal">
<input type="text" oninput="allowType(event, 'number', 10)" placeholder="number">
<input type="text" oninput="allowType(event, 'alphanum', 5)" placeholder="alphanumeric">
<input type="text" id="test" onkeyup="floatOnly(this);"/>
<script>
function floatOnly(i){
{
if ((i.value).length > 0){else{i.value = i.value.replace(".." , ".");i.value = i.value.replace("..." , ".");i.value = i.value.replace(/[^0-9\.]/g , "");}}else{i.value = i.value="0";}}<script>

Too many if-else statements. Can they be made global?

I'm trying to streamline this script. I have 50 of these if e.keyCode statements, so double nesting if/else statements seems ridiculous, but all other attempts I've made haven't worked.
The first if/else statement if(e.keyCode == 66 && e.shiftKey) is necessary, but I'm not sure about the second if (typedAdjusted >= paperWidth % charWidth) which is throwing a warning if too many characters are typed on a line relative to a fixed width.
Can the functionality if (typedAdjusted >= paperWidth % charWidth) gives me be global? It will need to be checked against specific keyCodes. For instance, the letter "B" should be figured into typedAdjusted while BACKSPACE and TAB and COMMAND should not.
var typed = $("span.char").length;
var typedAdjusted = typed+1;
var paperWidth = 900;
var charWidth = 44;
if (e.keyCode == 66) {
if (e.keyCode == 66 && e.shiftKey) {
$('#charLine-1').append('<span class="char">B</span>');
if (typedAdjusted >= paperWidth % charWidth) {
$('body').append('<span id="warning">WARNING!</span>');
}
else {
return false;
}
}
else {
$('#charLine-1').append('<span class="char">b</span>');
if (typedAdjusted >= paperWidth % charWidth) {
$('body').append('<span id="warning">WARNING!</span>');
}
else {
return false;
}
}
}
What do you mean by having 50 of them? You... don't mean one for each letter?
And why do you check for the keycode value twice? Do you see that the code is precisely identical except for the character?
Keep a lookup table, or direct character translation, and shorten it to a single method:
var c = lookup(e.keyCode, e.shiftKey);
$('#charLine-1').append('<span class="char">' + c + '</span>');
if (typedAdjusted >= paperWidth % charWidth) {
$('body').append('<span id="warning">WARNING!</span>');
} else {
return false;
}
That's going to create a whole bunch of spans.
var normal = {
66: 'b', 67: 'c', // etc.
};
var shifted = {
66: 'B', 67: 'C', // etc.
};
/**
* Looks up keycode using appropriate map.
*
* Returns `undefined` if not found; shouldn't insert.
*/
function lookup(code, shift) {
return shift ? shifted[code] : normal[code];
}
IF you like checking each one use a switch: call the checkKey function as needed passing the event.
function checklen() {
var typed = $("span.char").length;
var typedAdjusted = typed + 1;
var paperWidth = 900;
var charWidth = 44;
return (typedAdjusted >= paperWidth % charWidth);
}
function checkKey(e) {
var mychar = '';
var checkit = false;
switch (e.keyCode) {
case 66:
mychar = e.shiftKey ? 'B' : 'b';
checkit = checklen();
break;
case 67:
mychar = e.shiftKey ? 'C' : 'c';
checkit = checklen();
break;
case 68:
mychar = e.shiftKey ? 'D' : 'd';
checkit = checklen();
break;
default:
checkit = false;
break;
}
if (!checkit) {
$('#charLine-1').append('<span class="char">' + mychar + '</span>');
}
else {
$('body').append('<span id="warning">WARNING!</span>');
}
}
to get it to work on the entire document:
$(document).ready(function(){
$(document).keydown(function(e) {
checkKey(e);
});
});
then just click on the page and type characters - note only 'b','c','d' on the code above.
If you observe the keypress event, you can use String.fromCharCode(event.keyCode) to get the character entered and not have to mess with a lookup table.
function (event) {
var key = event.keyCode;
if (key > 31 && key < 127) return String.fromCharCode(key);
}

Getting Deleted character

in in Input field, if the user presses Backspace or Delete key, is there a way to get the deleted character.
I need to check it against a RegExp.
Assuming the input box has an id 'input'. Here is how with least amount of code you can find out the last character from the input box.
document.getElementById("input").onkeydown = function(evt) {
const t = evt.target;
if (evt.keyCode === 8) { // for backspace key
console.log(t.value[t.selectionStart - 1]);
} else if (evt.keyCode === 46) { // for delete key
console.log(t.value[t.selectionStart]);
}
};
<input id="input" />
The following will work in all major browsers for text <input> elements. It shouldn't be used for <textarea> elements because the getInputSelection function doesn't account for line breaks correctly in IE. See this answer for a (longer) function that will do this.
function getInputSelection(input) {
var start = 0, end = 0;
input.focus();
if ( typeof input.selectionStart == "number" &&
typeof input.selectionEnd == "number") {
start = input.selectionStart;
end = input.selectionEnd;
} else if (document.selection && document.selection.createRange) {
var range = document.selection.createRange();
if (range) {
var inputRange = input.createTextRange();
var workingRange = inputRange.duplicate();
var bookmark = range.getBookmark();
inputRange.moveToBookmark(bookmark);
workingRange.setEndPoint("EndToEnd", inputRange);
end = workingRange.text.length;
workingRange.setEndPoint("EndToStart", inputRange);
start = workingRange.text.length;
}
}
return {
start: start,
end: end,
length: end - start
};
}
document.getElementById("aTextBox").onkeydown = function(evt) {
evt = evt || window.event;
var keyCode = evt.keyCode;
var deleteKey = (keyCode == 46), backspaceKey = (keyCode == 8);
var sel, deletedText, val;
if (deleteKey || backspaceKey) {
val = this.value;
sel = getInputSelection(this);
if (sel.length) {
deletedText = val.slice(sel.start, sel.end);
} else {
deletedText = val.charAt(deleteKey ? sel.start : sel.start - 1);
}
alert("About to be deleted: " + deletedText);
}
};
No, there is no variable that stores the deleted char. Unless you have a history for Undo/Redo, but it would be difficult to get the information out of that component.
Easiest would be to compare the contents of the input field before and after delete/backspace have been pressed.
You could try something with the caret position:
function getCaretPosition(control){
var position = {};
if (control.selectionStart && control.selectionEnd){
position.start = control.selectionStart;
position.end = control.selectionEnd;
} else {
var range = document.selection.createRange();
position.start = (range.offsetLeft - 1) / 7;
position.end = position.start + (range.text.length);
}
position.length = position.end - position.start;
return position;
}
document.getElementById('test').​​​​onkeydown = function(e){
var selection = getCaretPosition(this);
var val = this.value;
if((e.keyCode==8 || e.keyCode==46) && selection.start!==selection.end){
alert(val.substr(selection.start, selection.length));
} else if(e.keyCode==8){
alert(val.substr(selection.start-1, 1));
} else if(e.keyCode==46){
alert(val.substr(selection.start, 1));
}
}​
Tested on Chrome 6. See jsFiddle for an example

Categories