TextInput doesn't take value while start typing

Advertisements

Could you help me with the javascript?

This is my code in add form mode:

  var inputBox = document.getElementById('pn');

inputBox.onkeyup = function(){
    document.getElementById('sc').innerHTML = inputBox.value;
}
<input type=text style='text-transform:uppercase' id='pn' name=pn>
<b><label style='text-transform:uppercase' id='sc'></label></b>

Here all working properly, but in edit mode when the input take the old value from DB the javascript result doesn’t take the text field while start typing

This is my code in add form mode:

  var inputBox = document.getElementById('pn');

inputBox.onkeyup = function(){
    document.getElementById('sc').innerHTML = inputBox.value;
}
<input type=text style='text-transform:uppercase' id='pn' name=pn value='Example'>
<b><label style='text-transform:uppercase' id='sc'></label></b>

Could someone correct javascript to taken the value before edit text in text input?

Example

Thanks in advance.

>Solution :

Just run the same code when the page first loads.

var inputBox = document.getElementById('pn');

function showInput() {
  document.getElementById('sc').innerHTML = inputBox.value;
}

inputBox.addEventListener("keyup", showInput);

window.addEventListener("load", showInput);
<input type=text style='text-transform:uppercase' id='pn' name=pn value='Example'>
<b><label style='text-transform:uppercase' id='sc'></label></b>

Leave a ReplyCancel reply