Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   addEventListener для input text (https://javascript.ru/forum/events/51849-addeventlistener-dlya-input-text.html)

jonrut 21.11.2014 20:47

addEventListener для input text
 
Доброго времени суток!
Проблема: например для кнопки button знаю как добавить addEventListener, а для поля input - нет.
Нужно создать массив, допустим var names = ["Петя", "Коля"].
Массив есть. Далее есть строка ввода <input type="text" id="input">.
input.value... с ним не могу разобраться или он здесь не нужен?
Нужно чтобы после ввода в input значения "Петя" срабатывала некая функция, а само поле очищалось от ввода.
Помогите, пожалуйста.
Спасибо.

krutoy 21.11.2014 22:54

<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
 
<input type="text" id="input"> 
    <script>

input=document.querySelector("#input")
arr=[/petya/i, /vasya/i]
input.oninput=function(){if(arr[0].test(this.value)||arr[1].test(this.value)) this.value=""}

    </script>
  </body>
</html>

Если верхний регистр не нужен убери флаги, или можешь использовать простое сравнение строк
<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
 
<input type="text" id="input"> 
<input type="text" id="input2"> 
    <script>

input=document.querySelector("#input")
arr=["Вася", "Петя", "петя", "вася"] // при вводе регистр имеет значение!!!
input.oninput=function(){if(arr[0]===this.value||arr[1]===this.value||arr[2]===this.value||arr[3]===this.value) this.value=""}// вариант 1

input2=document.querySelector("#input2")
isValue=function(word){
  for(var i in arr) if(arr[i]===word) return true
}
input2.oninput=function(){if(isValue(this.value)) this.value=""}//вариант 2
    </script>
  </body>
</html>

krutoy 21.11.2014 23:45

принципе, с addEventListener это тоже вроде работает (тестил V8 и FF)
<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
 
<input type="text" id="input"> 

    <script>
input=document.querySelector("#input")
arr=["Вася", "Петя", "петя", "вася"]
isValue=function(word){
  for(var i in arr) if(arr[i]===word) return true
}
input.addEventListener("input", function(){if(isValue(this.value)) this.value=""})
    </script>
  </body>
</html>

jonrut 22.11.2014 00:30

Krutoy, выручайте, пожалуйста!
 
input=document.querySelector("#input")
arr=[/petya/i, /vasya/i]
input.oninput=function(){if(arr[0].test(this.value)||arr[1].test(this.value)) this.value=""this.value=""
functionAdd();
}

functionAdd(){
alert("Проблема");
}


Подскажите, пожалуйста, если нужно ввести 100 имен, их либо по очереди вводить в arr либо есть другой способ?
Код, что Вы прислали - подошел мне, кроме одного: в конце добавил функцию, допустим functionAdd. И эта функция срабатывает на ввод любой клавишы, не зависимо, есть ли эта буква в arr или нет.
Теперь при нажатии любой клавиши выскакивает алерт, а необходимо, чтобы алерт выскакивал после ввода одного из значений массива.
После чего поле должно очиститься и можно вводить другое значение из того же массива.
Спасибо.

krutoy 22.11.2014 01:13

Цитата:

Сообщение от jonrut
их либо по очереди вводить в arr либо есть другой способ

Откуда имена беруться? Если просто вводить лишние скобки лень, можно
<!DOCTYPE HTML>
<html>
  <head><meta charset="windows-1251" /> </head>
  <body>
 
<input type="text" id="input"> 

    <script>

input=document.querySelector("#input")
arr="вася петя".split(" ")

isValue=function(word){
  for(var i in arr) { 
     var re=new RegExp(arr[i], "i")
     if(re.test(word)) return true
  }
}
 
Add=function Add(){
   alert("Проблема");
}


test=function(){
   if(isValue(this.value)) {this.value=""; Add()}
}

input.oninput=test

    </script>
  </body>
</html>

kostyanet 23.11.2014 11:23

Цитата:

Сообщение от jonrut
Подскажите, пожалуйста, если нужно ввести 100 имен, их либо по очереди вводить в arr либо есть другой способ?

Есть другой способ - список и поле при нем.

Для рендера тегов нужна готовая либа, ибо все уже давно написано.


Часовой пояс GMT +3, время: 19:08.