Your code works for me (see below). Maybe check where you are binding your keyup event. It should be bound once when the document loads before the page shows. If you bind it multiple times (i.e. if the code that contains your keyup function runs more than once) you will run into problems.
$("#arama").on("keyup", function(event) {
var i = event.keyCode;
if ((i >= 48 && i <= 57) || (i >= 96 && i <= 105)) {
$("#arama").off("keyup");
console.log("Number pressed. Stopping...");
} else {
console.log("Non-number pressed.");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="arama" />Videos
Your code works for me (see below). Maybe check where you are binding your keyup event. It should be bound once when the document loads before the page shows. If you bind it multiple times (i.e. if the code that contains your keyup function runs more than once) you will run into problems.
$("#arama").on("keyup", function(event) {
var i = event.keyCode;
if ((i >= 48 && i <= 57) || (i >= 96 && i <= 105)) {
$("#arama").off("keyup");
console.log("Number pressed. Stopping...");
} else {
console.log("Non-number pressed.");
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="arama" />No need to unbind the event. Try this
$("#arama").on("keyup",function(event) {
console.log("asd");
});
You could use dispatchEvent to trigger the keyup keyboard event.
input.dispatchEvent(new KeyboardEvent('keyup'));
By triggering the event this way, the this-argument that you pass to your function matches what it would be during a normal keyup event.
If needed, you can pass a specific key that should be reported by the event:
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'a'}));
Since you already have the name of the function as a string:
window"functionName";
Please refer to this link
declare the function checkLoesung outside the if.
also add [0] index to document.getElementsByClassName because it returns a collection
document.getElementsByClassName('halter')[0].onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
console.log("Enter");
return false;
}
}
function checkLoesung(id){//do stuff
}<input class="halter" type="text" onkeyup="checkLoesung(id);">Update based on comment and updated question.
I added the functionality to all inputs. So, for that, use document.querySelectorAll and use a css query. It returns an array. Use forEach and add the addEventListener for keypress to the elements.
Read the 2 comments I made and Do Whatever you want there.
The code is below.
var l_count = 0;
var last_sol = 7;
document.querySelectorAll('.halter').forEach(function(elem){
elem.addEventListener('keypress',function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
//Key pressed is enter. Do whatever you want
//console.log("Enter");
alert('hello');
return false;
}
//If required, add an else and add whatever you want when the key pressed is not enter
});});
function checkLoesung(id){
if(l_count != last_sol) {
var e_dies = document.getElementById(id).id;
var LoesungArray = [
"Hallo",
"gesicht",
"brust",
"wasser",
"flasche",
"tisch",
"lied"
];
var score_not = document.getElementById('score_not');
var punkt_score = (l_count + 1) * 3 + " / " + 3 * last_sol;
var success_meldung = "richtig!";
var fehler_meldung = "falsch!";
var melde_mich = document.getElementById('melder');
var loe_strip = document.getElementById(e_dies).value.replace(/ /g,'');
var loe_fin = loe_strip.toLowerCase();
var array_fin = LoesungArray[l_count].toLowerCase();
if (loe_fin == array_fin){
melde_mich.innerHTML = success_meldung;
$('#' + e_dies).nextAll('.halter:first').fadeIn('2000');
$('#' + e_dies).nextAll('.halter:first').focus();
l_count++;
score_not.innerHTML = punkt_score;
$('#score_not').css('display', 'none');
$('#score_not').fadeTo('3000', 1);
if(l_count == last_sol){
melde_mich.innerHTML = 'Richtig, du hast alles gelöst!';
return false;
};
} else if(document.getElementById(e_dies).value == "") {
melde_mich.innerHTML = '';
}
else {
melde_mich.innerHTML = fehler_meldung;
};
} else {return false};
};<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="digger_cont">
<p id="ueberschrift_koth">King of the Hill</p>
<div id="fragen_halter">
<input id="ha_1" class="halter" placeholder="안녕하세요" type="text" ><br/>
<input id="ha_2" class="halter" placeholder="얼굴" type="text" ><br/><br/>
<input id="ha_3" class="halter" placeholder="유방" type="text" ><br/><br/>
<input id="ha_4" class="halter" placeholder="물" type="text" ><br/><br/>
<input id="ha_5" class="halter" placeholder="병" type="text" ><br/><br/>
<input id="ha_6" class="halter" placeholder="책상" type="text" ><br/><br/>
<input id="ha_7" class="halter" placeholder="노래" type="text" >
</div>
<div id="score_halter">
<p>Punkte: <span id="score_not" style="display:none"></span></p>
<p id="melder"></p>
</div>Accessing to the element with getElementsByClassName it will return an array. So you should access to it by using it's index
Here you can test it in this plnkr
Why does your code not work?
You can't use the keyup event on the <div> element as you have tried to do, because JavaScript will never fire it as the div is never focused. Elements have to be focused to receive keypress events, otherwise how would the user know where their keyboard was going to type to.
What can we do about that?
One element that always "has focus" is the <body> of the webpage (unless of course, you are using a different area of your web browser, such as bookmarking a site, navigating with the URL bar, etc).
So, we can detect the event on the body of the page, and then change the content of the div accordingly. We can detect the event using document.body.onkeyup = function(event), and then get change the div content using document.getElementById("change").innerHTML, which targets that div by it's ID, and then sets it's HTML value to something new.
However, JavaScript will only send back the code of the key that was pressed (it's internal representation of the key), not the character which the key represents - (this is actually useful if you are trying to detect if a key like backspace or ctrl has been pressed). We can get this value from the event using event.keyCode.
Thus, we will have to transform that into a string, which is the final piece of our code : String.fromCharCode(event.keyCode). This transforms a character code into a string.
All together, we can update the value of the div in response to a key press.
Working Example
document.body.onkeyup = function(event) {
document.getElementById("change").innerHTML = String.fromCharCode(event.keyCode);
}<div id="change">p</div>Notes
- You can use
onkeypressrather thatonkeyupif you want to detect the case of letters; - You can use
+=rather than=if you want to append what you have typed now to what is already in the div; - If you want to just use a div as a place where you can type, check out contenteditable;
- If you want a list of keycodes that do not map to a string value, check out this list.
If you want to add the letters as you press you can add use +=. Also onkeypress is case sensitive while onkeyup will give you capital letters.
document.body.onkeypress = function(event) {
document.getElementById("change").innerHTML += String.fromCharCode(event.keyCode);
}<div id="change">p</div>