Как вызвать функцию при изменении значения текстового поля в Javascript? - PullRequest
Новая
       0

Как вызвать функцию при изменении значения текстового поля в Javascript?

0 голосов
/ 11 февраля 2020

Я хочу изменить ширину текстового поля, когда пользователь вводит более 17 символов в это текстовое поле, используя Javascript (если возможно), в противном случае любым другим способом.

Я написал код, чтобы сделать то же самое, но он меняет ширину только когда пользователь нажимает за пределами текстового поля после ввода более 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>

Ответы [ 3 ]

0 голосов
/ 11 февраля 2020

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>
0 голосов
/ 11 февраля 2020

Попробуйте это: 

var nametf = document.getElementById("nametf");

nametf.addEventListener("input", function(){
    if(nametf.value.length > 17) {
        nametf.size = "30";
        } else {
        nametf.size = "20";
        }
});
#nametf {
  height: 20px;
  padding: 5px 10px;
}
<title>TEXTFIELD TEST</title>
<form method="get" action="wwhome.php">
  <input type="text" name="name1" id="nametf" size="20" value="" required>
</form>
0 голосов
/ 11 февраля 2020
  1. Вам необходимо передать ссылку на функцию, используя this. Я бы также поменял при смене на при включении, потому что при смене ждет, когда вы переместите фокус с поля. 
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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...