For the last days I've been working on a stimulus presentation function. Now it's the details that need adjustment, in particular im stuck with this:
I want my keypress event to be executed only 20 times, after which an alert states that the task is over. I tried for looping and while. I've probably lost the overview to see my fault, but my code doesn't stop after 20 key presses. Where is my mistake?
var i=0;
while (i < 20) {
$(function(){
$(document).keypress(function(e){
if ($(e.target).is('input, textarea')) {
return;
};
if (e.which === 97 || e.which === 108 || e.which === 32) {
if(Math.random() < 0.5) {
var new_word = stim[Math.floor((Math.random()*stim.length)+1)].name;
$("#abc").text(new_word);
} else {
var new_img = stim[Math.floor((Math.random()*stim.length)+1)].path;
$("#abc").empty();
var prox_img = $('<img id="abcimg" height="300px" width="300px">');
prox_img.attr('src', new_img);
prox_img.appendTo('#abc');
}
};
});
});
i++;
alert("abcdefg");
};
You dont need loop, just use global counter, i for example
var i = 0; // saves count of keypress events
$(function() {
$(document).keypress(function(e) {
if ($(e.target).is('input, textarea') || i > 20) { // check for 20 events
return;
};
i++; // increase counter...
if (e.which === 97 || e.which === 108 || e.which === 32) {
if(Math.random() < 0.5) {
var new_word = stim[Math.floor((Math.random()*stim.length)+1)].name;
$("#abc").text(new_word);
} else {
var new_img = stim[Math.floor((Math.random()*stim.length)+1)].path;
$("#abc").empty();
var prox_img = $('<img id="abcimg" height="300px" width="300px">');
prox_img.attr('src', new_img);
prox_img.appendTo('#abc');
}
}
});
});
You need to remove the event when the loop is finished executing, else the event remains attached to the document.
$(document).off("keypress");
Related
How can I detect the difference between a single CTRL key and a CTRL + 1 key combination?
Currently I have the following:
window.addEventListener('keydown', function(e) {
if(e.keycode === 17){
alert('crtl only')
}
else if (e.ctrlKey && e.keyCode == 49) {
alert('crtl + 1');
}
}
When the key(s) are hit, make a note of the time. Then compare it with the time you noted the last time they key(s) were hit.
If the difference is within your threshold, consider it a double. Otherwise, don't.
If the difference is within your threshold, consider it a double. Otherwise, don't.
Rough example:
var delta = 500;
var lastKeypressTime = 0;
function KeyHandler(event)
{
if ( event.ctrlKey
&& String.fromCharCode(event.charCode).toUpperCase()) == 'T' )
{
var thisKeypressTime = new Date();
if ( thisKeypressTime - lastKeypressTime <= delta )
{
doDoubleKeypress();
// optional - if we'd rather not detect a triple-press
// as a second double-press, reset the timestamp
thisKeypressTime = 0;
}
lastKeypressTime = thisKeypressTime;
}
}
This should work:
window.addEventListener('keydown', function (e) {
if (e.ctrlKey && e.keyCode === 49){
alert('combo hit!');
}
}
Use debounce with keydown
function KeyPress(e) {
var evtobj = window.event ? event : e;
debouce(function(evtobj) {
if (evtobj.keyCode == 65 && evtobj.ctrlKey) {
console.log("Ctrl+a");
evtobj.preventDefault();
} else if (evtobj.ctrlKey) {
console.log("Only ctrl");
}
}, evtobj, 200);
}
Demo
function KeyPress(e) {
var evtobj = window.event ? event : e;
debouce(function(evtobj) {
if (evtobj.keyCode == 65 && evtobj.ctrlKey) {
console.log("Ctrl+a");
evtobj.preventDefault();
} else if (evtobj.ctrlKey) {
console.log("Only ctrl");
}
}, evtobj, 200);
}
function debouce(method, eventObj, debounceTime) {
if (this.timeoutId)
clearTimeout(this.timeoutId);
this.timeoutId = setTimeout(function() {
method(eventObj);
}, debounceTime);
}
document.onkeydown = KeyPress;
I want to detect the barcodein real-time ,
I the USB barcode scanner to scan barcode to get a price or ISBN ,
I will detect the text field 's string length .
It will trigger some functions if match the condition
But I ran the following code and run on Firexfox for a while
then my CPU uasge is more than 100% (Intel i5 3570K 3.xGHZ) and also consume much memory,
Is there any better solution can let me achieve the task?
Thank you all.
<head>
<style type="text/css">
.close_ime{ime-mode:disabled;}
</style>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.js" ></script>
<script>
$(document).ready(function () {
var pressed = false;
var chars = [];
$(window).keypress(function (e) {
if (e.which >= 48 && e.which <= 57) {
chars.push(String.fromCharCode(e.which));
}
console.log(e.which + ":" + chars.join("|"));
if (pressed == false) {
setTimeout(function () {
if (chars.length >= 10) {
var barcode = chars.join("");
console.log("Barcode Scanned: " + barcode);
// assign value to some input (or do whatever you want)
$("#barcode").val(barcode);
}
chars = [];
pressed = false;
}, 500);
}
pressed = true;
});
});
$("#barcode").keypress(function (e) {
if (e.which === 13) {
console.log("Prevent form submit.");
e.preventDefault();
}
});
</script>
</head>
<body>
<input type="text" class="close_ime" id="barcode" placeholder="Waiting for barcode scan..." size="40">
</body>
You can keep a timer variable which captures the setTimeout id. And clear it whenever there is a keypress event.
The only thing I can thing of causing performance problems is setTimeout , as you seem to unnecessarily creating an extra scope for each key press. Also once you clear the timeouts you would not be needing the pressed attribute as well.
$(document).ready(function () {
var chars = [],
timer;
$(window).keypress(function (e) {
// Clear the timer here
clearTimeout(timer);
console.log(e.which + ":" + chars.join("|"));
// You don't need the next statement if the
// keycode does not match in the first place
if (e.which < 48 && e.which > 57) return;
chars.push(String.fromCharCode(e.which));
// checking the length here
// if length less than 10 do nothing
if (chars.length < 10) return;
// Assign the id to the timer
// which will be cleared on next key press
timer = setTimeout(function () {
var barcode = chars.join("");
console.log("Barcode Scanned: " + barcode);
// assign value to some input (or do whatever you want)
$("#barcode").val(barcode);
chars = [];
}, 500);
});
});
$("#barcode").keypress(function (e) {
if (e.which === 13) {
console.log("Prevent form submit.");
e.preventDefault();
}
});
I have encountered a strange behavior on android browser / webview. I was testing an input that will automatically format to phone number format "(xxx) xxx-xxxx". But then what happened was when I tapped or press any number on androids keyboard, the first input was like this "(x" but then the cursor was in between "(" and "x". Is there a way to put the cursor after "x" value?
I tested this on iPhone and windows web browsers and it works fine. Please let me know if there are mistakes on my jquery or javascripts.
Thanks
HTML CODE:
<html>
<head>
<title>Sample Phone Number Format</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
</head>
<body>
<input type="text" id="phone" />
<script type="text/javascript">
$('#phone').on('keydown', function (event) {
objval = $(this).val();
if (event.keyCode == 46 || event.keyCode == 8) {} else {
if (!((event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || (objval.length > 13))) {
event.preventDefault();
} else {
if (objval.length == 0) {
$(this).val(objval + '(');
alert(objval + '(');
} else if (objval.length == 4) {
$(this).val(objval + ') ');
alert(objval + ') ');
} else if (objval.length == 9) {
$(this).val(objval + '-');
alert(objval + '-');
} else if (objval.length >= 14) {
if (event.keyCode == 9) {
return;
} else {
event.preventDefault();
}
}
}
}
});
$('#phone').on('keydown', function (event) {
var objVal = $(this).val();
if(objVal.length < 14)
{
validateCallerForm(objVal + String.fromCharCode((96 <= event.keyCode && event.keyCode <= 105)? event.keyCode-48 : event.keyCode));
}
});
//Validates proper phone format, true if valid phone number, false otherwise
function isValidPhoneNumber(elementValue) {
var numberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
return numberPattern.test(elementValue);
}
//validates entire caller form, also updates css classes for proper response
function validateCallerForm(PhoneNumber) {
if (isValidPhoneNumber(PhoneNumber)) {
alert("true");
} else {
alert("false");
}
}
</script>
</body>
</html>
Giving +50 Bounty to who'm will answer this correctly
you have to first define listener for typing and copy-paste like below (not required) :
$("#phone").keyup( function() {
maskLine(this);
});
$("#phone").change( function() {
maskLine(this);
});
Then, to manage cursor placement, you have to cache previous phone number and then, you could compare difference and update cursor position if needed.
So declare, you have to declare a global array like this :
var _cacheElementValues = new Array();
At last, you can check the function below, it applies your mask to phone number field and manage cursor placement :
function maskLine( element ) {
element = $(element);
var maskedLine = '';
var line = element.attr('value');
// check the cache of the input and abord if no change since last treatment
if (_cacheElementValues[element.attr('id')] != undefined && _cacheElementValues[element.attr('id')] == line) {
return;
}
line = line.replace(/\D/g, ''); // remove all characters != digits
line = line.substring(0, 10);
if (line != '') {
// apply mask
if (line.length <= 2 ) {
maskedLine = "(" + line;
} else if (line.length < 6) {
maskedLine = line.replace(/^([0-9]{3})([0-9]{0,3})/g, '($1) $2');
} else {
// mask : '(XXX) XXX-XXXX'
maskedLine = line.replace(/^([0-9]{3})([0-9]{3})([0-9]{0,4})/g, '($1) $2-$3');
}
}
// define cursor position at the end of the input by default
var pos = maskedLine.length;
// Change cursor placement if necessary
if (typeof element[0].selectionStart != 'undefined') {
var start = element[0].selectionStart;
var end = element[0].selectionEnd;
var insText = element[0].value.substring(start, end);
// get current cursor placement
if (insText.length == 0) {
pos = start;
} else {
pos = start + insText.length;
}
// find how many digits typing since last mask application
var previousLength = 0;
if (_cacheElementValues[element.attr('id')] != undefined) {
previousLength = _cacheElementValues[element.attr('id')].replace(/\s/g, '').length;
}
var diff = maskedLine.replace(/\s/g, '').length - previousLength;
// if sum of new typing digit is > 0 : we change cursor placement
if (diff > 0) {
pos += (diff - 1) + Math.round((diff-1)/3);
if (pos%6 == 0 && maskedLine.length >= pos+1) pos++;
}
}
// update input data & cache
element.val(maskedLine);
_cacheElementValues[element.attr('id')] = maskedLine;
// update cursor placement
element[0].selectionStart = element[0].selectionEnd = pos;
}
You can find this example on jsFiddle : http://jsfiddle.net/UE9LB/5/
I hope this little explantion can solve your problem ;)
Enjoy !
ps: i apologize for my poor english :s
I'd recommend at least starting with an existing plugin rather than going through your own isolated rounds of solving issues.
http://digitalbush.com/projects/masked-input-plugin/
https://github.com/igorescobar/jQuery-Mask-Plugin
The short answer is to set the selectionStart and selectionEnd properties of the input element. After you format the value, set these properties to this.value.length.
this.selectionStart = this.value.length;
this.selectionEnd = this.value.length;
But, where you are going to run into trouble is when the cursor is not at the end of the text. Eg, the user has manually positioned the cursor to a position within the text. To prevent the cursor from jumping to the end, you will need to detect the cursor position before you format the input, then put the cursor back in the appropriate position after formatting.
Edit: This jsFiddle may get you started, but isn't perfect yet.
I rewrite the code on my #phone keydown event and this will work on iPhone, Android, webkit browsers.
$('#phone').on('keydown', function (event) {
if (event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) {
// ignore if BKSPCE, left arrow, or right arrow
} else {
// validate if anything else
inputval = $(this).val();
var string = inputval.replace(/[^0-9]/g, "");
var first3 = string.substring(0,3);
var next3 = string.substring(3,6);
var next4 = string.substring(6,10);
var string = ("(" + first3 + ") " + next3 + "-" + next4);
$(this).val(string);
}
});
Trying to allow a user to type into a textarea, but if a certain word is seen, I would like the cursor to stop until that word is removed.
I have finding the word, but I am unable find a way to have the cursor stop.
Any ideas on how i would do this in javascript
$(function() {
$('#ideacomment').bind('keyup', function(e){
var characterLimit = 300;
charactersUsed = $(this).val().length;
if(charactersUsed > characterLimit){
charactersUsed = characterLimit;
$(this).val($(this).val().substr(0, characterLimit));
$(this).scrollTop($(this)[0].scrollHeight);
}
var charactersRemaining = characterLimit - charactersUsed;
$('#remainingCharacters').html(charactersRemaining);
var words = $('#ideacomment').val().split(/\b[\s,\.-:;]*/);
var wordcount = words.length;
var nonewords = new Array("f**k", "you");
var nonewordcount = nonewords.length;
//console.log(nonewordcount + ' is the count');
for(var i = 0; i < wordcount; i++) {
for(var t = 0; t < nonewordcount; t++) {
if(words[i] == nonewords[t]) {
message('No swearing please! <br><br> This post will not succeed!<br><br> Please remove it before you continue!', '430');
}
}
}
});
});
The code above counts the number of chars and also checks each word. Would I would like and I have tried without success is have it as if it ran out of space. But i have been unable to make it happen using the same code the limiter?
This is the new code. Still not working though:
$(function() {
$('#ideacomment').bind('keyup', function(e){
var characterLimit = 300;
charactersUsed = $(this).val().length;
if(charactersUsed > characterLimit){
charactersUsed = characterLimit;
$(this).val($(this).val().substr(0, characterLimit));
$(this).scrollTop($(this)[0].scrollHeight);
}
var charactersRemaining = characterLimit - charactersUsed;
$('#remainingCharacters').html(charactersRemaining);
var nonewords = new Array("hey", "you");
var nonewordcount = nonewords.length;
for(var t = 0; t < nonewordcount; t++) {
if ($(this).val().indexOf(nonewords[t]) != -1) {
message('No swearing please! <br><br> This post will not succeed!<br><br> Please remove it before you continue!', '430');
var keycode = e.charCode || e.keyCode;
console.log(keycode);
if (keycode !== 8 && keycode !== 46)
return false;
}
}
});
});
You could check which key is being pressed, and block it if it is not a Backspace or Delete. Here is a simplified example:
$(function() {
$('#textbox').keydown(function(e) {
if ($(this).val().indexOf('test') != -1) {
var keycode = e.charCode || e.keyCode;
if (keycode !== 8 && keycode !== 46)
return false;
}
});
});
jsFiddle Demo
Since you already seem to have the text-checking and notification part, all you're really missing is just the keypress-blocking part.
I've been wondering if there was a simple way to detect if a user presses the same character on the keyboard twice within one second. I've written some code that kind of works but it's unreliable.
var escapeCount = 0;
function reset() {
escapeCount = 0;
setTimeout('reset();', 1000);
}
window.onload = function() {
reset();
};
document.onkeyup = function(e) {
if (!e) var e = window.event;
var code = e.keyCode ? e.keyCode : e.which;
if (code == 27) escapeCount +=1;
if (escapeCount == 2) {
// stuff on second escape
}
};
Is there a better way to do this? Thanks
It would make sense to reset after 1 second has passed since the last character was pressed. Example:
var lastChar = -1;
document.onkeyup = function(e) {
if (!e) var e = window.event;
var code = e.keyCode ? e.keyCode : e.which;
if (lastChar == code) {
// Same key was pressed twice in a row within 1 second.
} else {
lastChar = code;
setTimeout(function() {lastChar = -1;}, 1000);
}
};
Your timer resets every second, so you not only have to press Escape again within a second of the last Escape, but that also has to have no timeout in between the presses.
It's probably easier to forget the timeout and just remember the time of the last keypress instead:
var lastescapetime= null;
document.onkeyup= function(event) {
if (event===undefined) event= window.event;
if (event.keyCode===27) {
var now= new Date().getTime();
if (lastescapetime!==null && now<lastescapetime+1000) {
alert('You double-escaped!');
lastescapetime= null;
} else {
lastescapetime= now;
}
} else {
lastescapetime= null;
}
};