Блог

Главная - Вопросы по программированию - как определить, что пользователь ввел в поле ввода в html и javascript

как определить, что пользователь ввел в поле ввода в html и javascript

#javascript #html #css

Вопрос:

Я хочу, чтобы мое поле ввода обнаруживало такой текст…

 var input = document.getElemntById("inputbox");
function buttonclick() {
  if ((input = "h")) {
    input.innerHTML = "hello";
  }
}

Это делается нажатием кнопки, но мне нужно это сделать onkeyup() , но я не знаю, как это сделать..
если пользователь внезапно введет h поле ввода, сделайте это hello
как мне это сделать?
Заранее спасибо.

Комментарии:

1. Это должно было быть описано в учебнике, который вы должны были пройти.

Ответ №1:

Вам действительно просто нужно onkeyup событие в вашем html-теге.

 var input = document.getElementById("inputbox");

function buttonclick() {
  if (input.value === "h") {
    input.value = "hello";
  }
} 
 <input id="inputbox" onkeyup="buttonclick()">

Когда клавиша поднята buttonclick() , вызывается функция. Вам также необходимо захватить value входные данные, поскольку innerHTML относится не к тому, что помещено в поле ввода, а к фактическому коду, который будет находиться, скажем, между двумя <div> </div> тегами.

Комментарии:

1. но если пользователь хочет ввести «привет», как мне это сделать? потому что, когда появится сообщение «Привет», если я вернусь в исходное пространство, оно снова появится

2. @RandomUser Я не понимаю, о чем вы спрашиваете. Вы хотите, чтобы он предлагал автоматическое завершение?

Ответ №2:

Добавьте список событий:

 document.getElementById("inputbox").addEventListener("keyup", (e) => {
    if (e.target.value == "h") e.target.value = "hello"
}

Ответ №3:

Для работы вам необходимо внести следующие изменения:

1) TYPO : Вы должны использовать getElementById вместо getElemntById 

 var input = document.getElementById("inputbox");

2) Вы можете использовать keyup событие как

 input.addEventListener( "keyup", changeInputValue )

3) Когда вы проверяете равенство двух строк, используйте === . = это для задания.

 input.value.trim() === "h"

4) Вы должны сравнить value input то, с h чем .

 input.value.trim() === "h"

NOTE: Я использовал trim метод, потому что, если пользователь добавил немного места
раньше h , он все равно будет установлен hello . Вы можете удалить его, если
не хотите.

 var input = document.getElementById("inputbox");

function changeInputValue() {
  if (input.value.trim() === "h") {   // input.value === "h" 
    input.value = "hello";
  }
}

input.addEventListener("keyup", changeInputValue) 
 <input type="text" id="inputbox" />
Метки: ,