Question

我有一个<p>元素，应该包含<input>框中写的内容。 <p>确实包含<input>中除最后一个字符之外的所有内容。

例如，（不是有效的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中的最后一个字符？

Answer 1

通过注册'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/

Answer 2

如果要从输入值中删除最后一个字符，并在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>

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

2 个答案: