Replace input text value by text in string in REALTIME
What I need: When I press any key on the keyboard in the input text, I replace it with the content of the string.
This is what I have: https://jsfiddle.net/ypcxu27o/
<input id="edValue" type="text" onKeyUp="edValueKey()">
function edValueKey()
{
//var moninput = document.getElementById("edValue").value;
var monTexte = 'This is my test';
var cptTexte = document.getElementById("edValue").value;
cptTexte = cptTexte.length;
//alert(cptTexte);
document.getElementById("edValue").value = monTexte.substr(0, cptTexte);
//document.getElementById("edValue").innerHTML = 'yuty';
}
My problem is that we see a key press before my script replaces it. Can you hide it?
Thank.
+3
Elbarto
source
to share
4 answers
This should do it:
document.getElementById('edValue').addEventListener('keydown', function(ev) {
var monTexte = 'This is my test';
if(ev.which !== 8) { //everything except backspace
this.value= monTexte.substr(0,this.value.length+1);
ev.preventDefault();
}
});
<input id="edValue" type="text">
+2
Rick hitchcock
source
to share
try this:
<input id="edValue" type="text" onKeyPress="edValueKey(event)">
function edValueKey(e) {
var monTexte = 'This is my test';
var cptTexte = document.getElementById("edValue").value;
cptTexte = cptTexte.length + 1;
document.getElementById("edValue").value = monTexte.substr(0, cptTexte);
e.preventDefault();
}
see also fiddle: https://jsfiddle.net/ypcxu27o/23/
changes:
- use onKeyPress instead of onKeyUp event
- use e.preventDefault () to prevent showing original input
- use cptTexte.length + 1 to account for the entered character.
+1
Remigius stalder
source
to share
you can try some css trick here how to keep the font transparent initially.
$('#edValue').css('color','transparent');
and after at the end of your operation, set the color to black again $('#edValue').css('color','black');
0
Kaushik Thanki
source
to share
<input id="edValue" type="text" onKeyUp="edValueKey()">
function edValueKey()
{
var monInput = document.getElementById("edValue");
var monTexte = 'This is my test';
var cptTexte = monInput.value;
monInput.value = monTexte.substr(0, cptTexte.length);
}
https://jsfiddle.net/ypcxu27o/25/
0
Nono
source
to share