时间戳

首页 > 解决方案 > Javascript中文本字段值更改时如何调用函数？

javascript - Javascript中文本字段值更改时如何调用函数？

问题描述

当用户使用 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>

标签： javascripthtmlcssfunctiondom

解决方案

  1. 您需要使用this. 我也会将 on-change 更改为 on-key-up，因为 on-change 等待您将焦点从现场移开。
onkeyup="widen(this)"
  1. 然后你需要用你的变量“ 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>

推荐阅读