在输入框中显示实时结果

Question

I am trying to display the results of an input in real time in another disabled input box and am not having much luck. Code below:

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

inputBox.onkeyup = function(){
    document.getElementById('output').innerHTML = inputBox.value*2;
}

<input type='text' id='input'>

<input type='text' id='output' disabled>

Can anyone help?

Thanks,

John

Answer 1

Try adding a listener and use value instead of innerHTML:

document.getElementById('input').addEventListener("keyup", myFunction);

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

function myFunction(){
    document.getElementById('output').value = inputBox.value*2;
}

JSfiddle: https://jsfiddle.net/22t37834/

Answer 2

Use the 'keyup' as it is fired after the char is entered.

$("#input").keyup (function (e) {
     $('#output').val($(this).val() * 2);
});

Answer 3

Try This one -

 var inputBox = document.getElementById('input'); inputBox.onkeyup = function(){ document.getElementById('output').innerHTML = inputBox.value*2; var val = document.getElementById('input').value document.getElementById('output').value = val; } 

 <input type='text' id='input'> <input type='text' id='output' disabled>