当用户使用Javascript在文本字段中输入超过17个字符时，我想更改文本字段的宽度（如果可能），否则通过任何其他方式。
我写了一个代码来做同样的事情，但是只有当用户在输入超过17个字符后在文本字段外单击时，宽度才会改变。我希望它在用户输入超过17个字符时自动更改宽度：
function widen() {
var value = nametf.value;
if (value.length > 17) {
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}#nametf {
width: 200px;
height: 20px;
padding: 5px 10px;
}<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" onchange="widen()" value="" required>
</form>onchange在输入失去焦点时被激活，这就是为什么当您单击外部时它可以工作的原因。另一方面，当值更改时，oninput将立即触发：
const nametf = document.getElementById('nametf');
function widen() {
var value = nametf.value;
if (value.length > 17) {
nametf.style.width = '300px';
} else {
nametf.style.width = '200px';
}
}#nametf {
width: 200px;
height: 20px;
padding: 5px 10px;
}<html>
<form method="get" action="wwhome.php">
<input type="text" name="name1" id="nametf" oninput="widen()" value="" required>
</form>
</html>this将自引用传递给该函数。我也会将“ on-change”更改为“ on-key-up”，因为on-change会等待您将焦点移离该字段。onkeyup="widen(this)"
nametf”对函数进行参数化] >>function widen(nametf) { // ... }
function widen(nametf) { var value = nametf.value; if (value.length > 17) { nametf.style.width = '300px'; } else { nametf.style.width = '200px'; } }#nametf { width: 200px; height: 20px; padding: 5px 10px; }<title>TEXTFIELD TEST</title> <form method="get" action="wwhome.php"> <input type="text" name="name1" id="nametf" onkeyup="widen(this)" value="" required> </form>
更好的方法是基于当前值使用em单位来扩展文本。
initExpandingFields(); function initExpandingFields() { Array.from(document.querySelectorAll('.expanding-field')).forEach(field => { field.addEventListener('keyup', onFieldChange); }); } function onFieldChange(e) { let field = e.target, len = field.value.length; field.style.width = (len * 0.667) + 'em'; }#nametf { width: 200px; height: 20px; padding: 5px 10px; }<title>TEXTFIELD TEST</title> <form method="get" action="wwhome.php"> <input type="text" class="expanding-field" name="name1" id="nametf" value="" required> </form>
尝试一下：