div寬度改變功能
[英]div width changing function
問題描述
如果我想實時更改輸入的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>
2 個解決方案
解決方案1
2 2018-01-15 15:33:50
您需要將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()">
解決方案2
0 2018-01-15 15:38:31
您應該使用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的寬度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.