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元素不會根據輸入值更新

回答

相關問題