Question

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

＆＃13;

<!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>

＆＃13;

Answer 1

您需要将onkeypress更改为onkeyup

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

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

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 个答案: