HTML - кнопка - клик в строке поиска - PullRequest
Новая
       23

HTML - кнопка - клик в строке поиска

0 голосов
/ 24 октября 2018

Я ищу решение для следующего: У меня есть строка поиска со следующим кодом: 

<input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">

У меня есть несколько таких кнопок: 

<input type="button" value="Banana">
<input type="button" value="Pear">

Чтомне нужно добавить по порядку, поэтому, когда вы нажимаете кнопку «Банан», слово «банан» вставляется в строку поиска (input id = "myInput").

Я знаю, что вам нужен onclick = ""в кнопке ввода и JavaScript для вставки текста, но что это за функция?

РЕДАКТИРОВАТЬ:

В настоящее время у меня уже есть событие слушателя: 

 document.addEventListener('DOMContentLoaded', function() {
  if (document.getElementById("myInput").value.length > 1) {
    document.getElementById("header").className = "hideHeader";
  } else {
    ContactsearchFX();
    document.getElementById('myInput').addEventListener('input', ContactsearchFX);
  }
});

Какинтегрировать это решение:

HTML 

<button onclick="addval('Banana')">Banana</button>
<button onClick="addval('Pear')">Pear</button>

Javascript 

 function setValue(name){
   document.getElementById("myInput").value = name;

}

Ответы [ 4 ]

0 голосов
/ 24 октября 2018

Попробуйте следующее: 

function myFunction() {
   document.getElementById("myInput").value = "Banana";
}

А для кнопки: 

<button type="button" onclick="myFunction()">Banana</button>
0 голосов
/ 24 октября 2018

HTML 

<input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">
<button onclick="addval('Banana')">Banana</button>
<button onClick="addval('Apple')">Apple</button>

JavaScript 

function addval(e){
   var input = document.getElementById('myInput');
   input.value += ' '+e; 
}
0 голосов
/ 24 октября 2018

Вам необходимо добавить значение кнопки в ваш вводимый текст.Сначала вы создаете функцию для обработки нажатия на кнопку, после чего вы передаете значение кнопки в поле ввода. 

const clickButtonHandler = (evt) => { 
 document.querySelector('.form-control').value = evt.value;
}
<input autofocus class="form-control" style="width:40%" type="search" id="myInput" placeholder="Enter keywords here...">

<input type="button" onclick="clickButtonHandler(this)" value="Banana">
<input type="button" onclick="clickButtonHandler(this)" value="Pear">
0 голосов
/ 24 октября 2018

Я думаю, это все исправит: 

<input type="button" id="fruit" value="Banana">

document.getElementById("fruit").addEventListener("click", function(){
       document.getElementById("myInput").value = this.value;
});
...