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" />
Answer from Chris Thorsvik on Stack OverflowVideos
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