html元素不会根据输入值更新

我有一个<p>元素，该元素应该包含任何在<input>框中写入的内容。 <p>包含<input>除最后一个字符外的所有内容。html元素不会根据输入值更新

例如，（不是有效的JS代码）

if input = Fish 
    then p = Fis 

if input = Monster 
    then p = Monste

这里是我的代码

<head> 
     <script> 
      window.onload = function() 
      { 
       document.querySelector('input').addEventListener('keydown', function() 
       { 
        document.querySelector('p').innerHTML = document.querySelector('input').value 
       }); 
      } 
     </script> 
    </head> 
    <body> 
     <p></p> 
     <input type="text" /> 
    </body>

如何让p元素包含即使在input的最后一个字符？

来源

2017-08-29 Fahem Moz

通过注册'keydown'事件，当按下按键时，您的逻辑会触发，但输入框的值在您的手指离开按钮后才会更新。

尝试注册为'keyup'。

<script> 
      window.onload = function() 
      { 
       document.querySelector('input').addEventListener('keyup', function() 
       { 
        document.querySelector('p').innerHTML = document.querySelector('input').value 
       }); 
      } 
     </script>

小提琴：https://jsfiddle.net/cb457Lpt/

来源

2017-08-29 15:16:11 Paul

更好事件'input'。 – trincot

“更好”是主观术语，但是是的，这也是一种选择。 – Paul

如果你想删除输入值的最后一个字符，并在一个HTML元素添加造成的字符串，试试这个代码：

<p id='id_p'></p> 
<input type="text" id='id_inp' /> 
<script> 
var id_inp = document.querySelector('#id_inp'); 
id_inp.addEventListener('input', function(e){ 
    var str_inp = e.target.value; 
    document.querySelector('#id_p').innerHTML = str_inp.replace(str_inp.substr(str_inp.length - 1), ''); 
}); 
</script>

来源

2017-08-29 15:30:28 CoursesWeb

html元素不会根据输入值更新

回答

相关问题