Felix Grötz
Reputation: 27
how can i call a function with javascript as soon as the input changes?
I want a webapplication that calculates a SHA1 hash depending on the input. However, the hash should be recalculated every time a letter or character changes in the input field. In my code the SHA1 hash is calculated once and is therefore always wrong at the beginning, because it calculates the hash value of an empty input.
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<div id="box">
</div>
</head>
<body>
<header>
<table>
<td>
<h1>Überschrift</h1>
</td>
<td>
</table>
</header>
<div id="content">
<main>
</main>
</div>
</div>
<form id="form" action="/cgi-bin/test.py" method="POST" onInput="Geeks()">
<table>
<tr>
<th colspan="2">Passworteingabe</th>
</tr>
<tr>
<td>
Passwort:
</td>
<td>
<input type="text" name="passwordcheck" id="passwordcheck" id="passwordcheck" "onChange=" Geeks()">
</td>
</tr>
</table>
<input type="hidden" id="myfield" name="myfield" value="">
<input type="submit">
</form>
</div>
<script>
msg=document.getElementById("passwordcheck").value
function SHA1 (msg) {
function rotate_left(n,s) {
var t4 = ( n<<s ) | (n>>>(32-s));
return t4;
};
function lsb_hex(val) {
var str="";
var i;
var vh;
var vl;
for( i=0; i<=6; i+=2 ) {
vh = (val>>>(i*4+4))&0x0f;
vl = (val>>>(i*4))&0x0f;
str += vh.toString(16) + vl.toString(16);
}
return str;
};
function cvt_hex(val) {
var str="";
var i;
var v;
for( i=7; i>=0; i-- ) {
v = (val>>>(i*4))&0x0f;
str += v.toString(16);
}
return str;
};
function Utf8Encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
};
var blockstart;
var i, j;
var W = new Array(80);
var H0 = 0x67452301;
var H1 = 0xEFCDAB89;
var H2 = 0x98BADCFE;
var H3 = 0x10325476;
var H4 = 0xC3D2E1F0;
var A, B, C, D, E;
var temp;
msg = Utf8Encode(msg);
var msg_len = msg.length;
var word_array = new Array();
for( i=0; i<msg_len-3; i+=4 ) {
j = msg.charCodeAt(i)<<24 | msg.charCodeAt(i+1)<<16 |
msg.charCodeAt(i+2)<<8 | msg.charCodeAt(i+3);
word_array.push( j );
}
switch( msg_len % 4 ) {
case 0:
i = 0x080000000;
break;
case 1:
i = msg.charCodeAt(msg_len-1)<<24 | 0x0800000;
break;
case 2:
i = msg.charCodeAt(msg_len-2)<<24 | msg.charCodeAt(msg_len-1)<<16 | 0x08000;
break;
case 3:
i = msg.charCodeAt(msg_len-3)<<24 | msg.charCodeAt(msg_len-2)<<16 | msg.charCodeAt(msg_len-1)<<8 | 0x80;
break;
}
word_array.push( i );
while( (word_array.length % 16) != 14 ) word_array.push( 0 );
word_array.push( msg_len>>>29 );
word_array.push( (msg_len<<3)&0x0ffffffff );
for ( blockstart=0; blockstart<word_array.length; blockstart+=16 ) {
for( i=0; i<16; i++ ) W[i] = word_array[blockstart+i];
for( i=16; i<=79; i++ ) W[i] = rotate_left(W[i-3] ^ W[i-8] ^ W[i-14] ^ W[i-16], 1);
A = H0;
B = H1;
C = H2;
D = H3;
E = H4;
for( i= 0; i<=19; i++ ) {
temp = (rotate_left(A,5) + ((B&C) | (~B&D)) + E + W[i] + 0x5A827999) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B,30);
B = A;
A = temp;
}
for( i=20; i<=39; i++ ) {
temp = (rotate_left(A,5) + (B ^ C ^ D) + E + W[i] + 0x6ED9EBA1) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B,30);
B = A;
A = temp;
}
for( i=40; i<=59; i++ ) {
temp = (rotate_left(A,5) + ((B&C) | (B&D) | (C&D)) + E + W[i] + 0x8F1BBCDC) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B,30);
B = A;
A = temp;
}
for( i=60; i<=79; i++ ) {
temp = (rotate_left(A,5) + (B ^ C ^ D) + E + W[i] + 0xCA62C1D6) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B,30);
B = A;
A = temp;
}
H0 = (H0 + A) & 0x0ffffffff;
H1 = (H1 + B) & 0x0ffffffff;
H2 = (H2 + C) & 0x0ffffffff;
H3 = (H3 + D) & 0x0ffffffff;
H4 = (H4 + E) & 0x0ffffffff;
}
var temp = cvt_hex(H0) + cvt_hex(H1) + cvt_hex(H2) + cvt_hex(H3) + cvt_hex(H4);
return temp.toLowerCase();
}
f1=SHA1(msg)
document.write(f1)
document.getElementById('myfield').value=SHA1(msg)
</script>
<script>
function Geeks() {
var y = SHA1(msg)
var x = document.getElementById("myfield").value;
document.getElementById("sudo").innerHTML =
"Entered Text: " + SHA1(msg);
}
</script>
<p id="sudo"></p>
</body>
</html>Upvotes: 0
Views: 104
Answers (2)
nmak18
Reputation: 1169
There are multiple errors in the code. Below are the suggested changes to fix the issue:
<input type="text" name="passwordcheck" id="passwordcheck" "onChange="Geeks()">; there is a additional " before onChange which is not needed. It should be<input type="text" name="passwordcheck" id="passwordcheck" onChange="Geeks()">- You are using
onchangelistener; where as onchange event occurs when the element loses focus. Useoninputoronkeyupinstead as you want the hash to update as the content of the passwordcheck box changes - Remove the
onInput="Geeks()"listener from the from. - Pass the updated value to
SHA1()function by usingevent.target.valueinstead of Global msg variable.
Hope this helps. Let me know if you need any further clarifications.
<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<div id="box">
</div>
</head>
<body>
<header>
<table>
<td>
<h1>Überschrift</h1>
</td>
<td>
</table>
</header>
<div id="content">
<main>
</main>
</div>
</div>
<form id="form" action="/cgi-bin/test.py" method="POST">
<table>
<tr>
<th colspan="2">Passworteingabe</th>
</tr>
<tr>
<td>
Passwort:
</td>
<td>
<input type="text" name="passwordcheck" id="passwordcheck" oninput="Geeks(event)">
</td>
</tr>
</table>
<input type="hidden" id="myfield" name="myfield" value="">
<input type="submit">
</form>
</div>
<script>
msg = document.getElementById("passwordcheck").value
function SHA1(msg) {
function rotate_left(n, s) {
var t4 = (n << s) | (n >>> (32 - s));
return t4;
};
function lsb_hex(val) {
var str = "";
var i;
var vh;
var vl;
for (i = 0; i <= 6; i += 2) {
vh = (val >>> (i * 4 + 4)) & 0x0f;
vl = (val >>> (i * 4)) & 0x0f;
str += vh.toString(16) + vl.toString(16);
}
return str;
};
function cvt_hex(val) {
var str = "";
var i;
var v;
for (i = 7; i >= 0; i--) {
v = (val >>> (i * 4)) & 0x0f;
str += v.toString(16);
}
return str;
};
function Utf8Encode(string) {
string = string.replace(/\r\n/g, "\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
} else if ((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
} else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
};
var blockstart;
var i, j;
var W = new Array(80);
var H0 = 0x67452301;
var H1 = 0xEFCDAB89;
var H2 = 0x98BADCFE;
var H3 = 0x10325476;
var H4 = 0xC3D2E1F0;
var A, B, C, D, E;
var temp;
msg = Utf8Encode(msg);
var msg_len = msg.length;
var word_array = new Array();
for (i = 0; i < msg_len - 3; i += 4) {
j = msg.charCodeAt(i) << 24 | msg.charCodeAt(i + 1) << 16 |
msg.charCodeAt(i + 2) << 8 | msg.charCodeAt(i + 3);
word_array.push(j);
}
switch (msg_len % 4) {
case 0:
i = 0x080000000;
break;
case 1:
i = msg.charCodeAt(msg_len - 1) << 24 | 0x0800000;
break;
case 2:
i = msg.charCodeAt(msg_len - 2) << 24 | msg.charCodeAt(msg_len - 1) << 16 | 0x08000;
break;
case 3:
i = msg.charCodeAt(msg_len - 3) << 24 | msg.charCodeAt(msg_len - 2) << 16 | msg.charCodeAt(msg_len - 1) << 8 | 0x80;
break;
}
word_array.push(i);
while ((word_array.length % 16) != 14) word_array.push(0);
word_array.push(msg_len >>> 29);
word_array.push((msg_len << 3) & 0x0ffffffff);
for (blockstart = 0; blockstart < word_array.length; blockstart += 16) {
for (i = 0; i < 16; i++) W[i] = word_array[blockstart + i];
for (i = 16; i <= 79; i++) W[i] = rotate_left(W[i - 3] ^ W[i - 8] ^ W[i - 14] ^ W[i - 16], 1);
A = H0;
B = H1;
C = H2;
D = H3;
E = H4;
for (i = 0; i <= 19; i++) {
temp = (rotate_left(A, 5) + ((B & C) | (~B & D)) + E + W[i] + 0x5A827999) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B, 30);
B = A;
A = temp;
}
for (i = 20; i <= 39; i++) {
temp = (rotate_left(A, 5) + (B ^ C ^ D) + E + W[i] + 0x6ED9EBA1) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B, 30);
B = A;
A = temp;
}
for (i = 40; i <= 59; i++) {
temp = (rotate_left(A, 5) + ((B & C) | (B & D) | (C & D)) + E + W[i] + 0x8F1BBCDC) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B, 30);
B = A;
A = temp;
}
for (i = 60; i <= 79; i++) {
temp = (rotate_left(A, 5) + (B ^ C ^ D) + E + W[i] + 0xCA62C1D6) & 0x0ffffffff;
E = D;
D = C;
C = rotate_left(B, 30);
B = A;
A = temp;
}
H0 = (H0 + A) & 0x0ffffffff;
H1 = (H1 + B) & 0x0ffffffff;
H2 = (H2 + C) & 0x0ffffffff;
H3 = (H3 + D) & 0x0ffffffff;
H4 = (H4 + E) & 0x0ffffffff;
}
var temp = cvt_hex(H0) + cvt_hex(H1) + cvt_hex(H2) + cvt_hex(H3) + cvt_hex(H4);
return temp.toLowerCase();
}
</script>
<script>
function Geeks(event) {
debugger;
var y = SHA1(event.target.value);
var x = document.getElementById("myfield").value;
document.getElementById("sudo").innerHTML =
"Entered Text: " + y;
}
</script>
<p id="sudo"></p>
</body>
</html>Upvotes: 0
Bivin Vinod
Reputation: 2750
you can use the below methods
<input id="mySelect" type="text" onchange="myFunction()">
or
<input id="mySelect" type="text" onkeypress="myFunction()">
i think onKeypress is the good option for your problem
Upvotes: 1
Related Questions
- How to call function when input value changes?
- Calling a function based on input field value changes in JavaScript
- How can I run a javascript function when input changes
- Calling a function everytime the input text changes
- How to run a function when input has filled in
- Call jQuery function on any change in input field
- Trigger change or input when javascript changes input value
- JavaScript - run function on <input> change - NO JQUERY
- How can I execute a javascript function when an input changes?
- How do I check when an input is changed?