div宽度改变功能

Question

如果我想实时更改输入的div，有人可以告诉我为什么该函数不接受第一个值。 另外，该功能不会激活将输入值ec 400px减小到100px的操作。 输入第二个参数效果很好。 如果输入244，则div仅更改为44px。 如果之后输入空格，则转到244，这是正确的。 但这不是UX正确的。 为此只需要JavaScript解决方案。 谢谢

 <!DOCTYPE html> <html> <head> <title>gr</title> <style>#in{ border:1px solid grey; height: 200px; width: 100%; transition: all 1s; } </style> </head> <body> <div id='in'></div> <input type="text" id='sisse' onkeypress="change()"> <script> function change(){ document.getElementById('in').style.width=document.getElementById('sisse').value+'px' } </script> </body> </html>

Answer 1

您需要将onkeypress更改为onkeyup

在所有浏览器中，不会为所有键（例如ALT，CTRL，SHIFT，ESC，BACKSPAC等）触发onkeypress事件。 要仅检测用户是否按下了按键，请改用onkeydown或keyip，因为它适用于所有按键。

当按下某个键时会触发keypress事件，并且该键通常会产生一个字符值

 function change(){ document.getElementById('in').style.width=document.getElementById('sisse').value+'px' }

 #in{ border:1px solid grey; height: 200px; width: 100%; transition: all 1s; }

 <div id='in'></div> <input type="text" id='sisse' onkeyup="change()">

Answer 2

您应该使用onchange事件。 在函数参数内部，您可以传递引发事件的元素，在这种情况下，它将作为输入，因此您可以执行以下操作：

<input  type="text" id='sisse' onchange="change(this)">
<script>
     function change(el) {
         document.getElementById('in').style.width=el.value+'px'
     }
</script>

之所以不要使用onkeypress是因为在更新输入之前会触发此事件，因此在读取输入值时不会获得更新的值。 相反，每次输入更新时都会触发onchanges 。

div宽度改变功能

问题描述

2 个解决方案

解决方案1
2 2018-01-15 15:33:50

解决方案2
0 2018-01-15 15:38:31

div宽度改变功能

问题描述

2 个解决方案

解决方案1 2 2018-01-15 15:33:50

解决方案2 0 2018-01-15 15:38:31

解决方案1
2 2018-01-15 15:33:50

解决方案2
0 2018-01-15 15:38:31