如何在 Vanilla 中将点击和按键绑定到输入字段 JavaScript

Question

我正在从事 freecodecamp 的维基百科查看器项目。我有一个有效的例子，但有几件事我不知道该怎么做。

首先，如何通过在输入字段中键入并按回车键或单击按钮来执行某些 AJAX 请求？

接下来，当我尝试在输入字段中键入内容并按回车键时，结果显示在网页中。但是，当我尝试再次输入并输入时，新结果不会显示，但之前的结果消失了，我必须再次输入并按回车键才能获得新结果。

我知道还有其他帖子使用 jQuery，我也不理解也不想直接使用 jQuery JavaScript。

var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&origin=*&search=';
var inputSearch = document.myForm.search;
var searchBtn = document.myForm.searchBtn;
var list = document.getElementById("list");
var random = document.getElementsByClassName('random')[0];

random.addEventListener("click" , function(){
  window.open("https://en.wikipedia.org/wiki/Special:Random");
});

function requestData ( e ) {
  var inputStr = e.target.value;
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ) {
        var dataObj = JSON.parse(request.responseText);
        var titles = dataObj[1];
        var descriptions = dataObj[2];
        var links = dataObj[3];
        document.myForm.innerHTML += "<h2><span>" + links.length + "</span> results for \"" + "<span>" + inputStr + "</span>" +"\" </h2>"; 
        list.innerHTML = "";
        for ( var i = 0; i < titles.length; i++ ) {
          var li = "<li><a target='_blank' href=" + links[i] + ">" + titles[i] + "</a></li>";
          list.innerHTML += li;
        }
      }
      else {
        console.log("Server responded with following error code : " + request.status);
      }
    }
  };
  
  if ( e.keyCode === 13 ) {
      console.log(e.type);
      request.open("GET" , url + inputStr);
      request.send(null);
      e.preventDefault();
  }

}

inputSearch.addEventListener("keydown" , requestData);
searchBtn.addEventListener("click" , requestData);

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/* CSS reset ends here */

body {
 font-size: 16px;
 font-family: 'Oxygen', sans-serif;
 
}

.container-wrapper {
 margin: 0 auto;
 text-align: center;
 height: 100vh;

}

header {
 /*background-color: #fc3e5b;*/
 padding: 80px 0;
}

header h1 {
 font-family: 'Anton', sans-serif; 
 font-size: 70px;
 padding: 30px 0 80px 0;
 color: #fc3e5b;
}

form input , form button {
 padding: 10px 8px;
 font-size: 22px;
 border: 1px solid #fc3e5b;
 outline: 0;
 display: inline;
 margin: 0;
}

form button {
 background-color: #fc3e5b;
 color: #fff;
}

h2 {
 font-size: 25px;
 margin-top: 32px;
}

h2 span {
 font-weight:bold;
 color: #fc3e5b;
}
.random {
 padding: 22px 7px;
 border-radius: 100%;
 margin: 20px 0 15px 0;
}

.random:hover {
 border: 5px solid #fc3e6b;
}

#list {
 width: 75%;
 margin: 0 auto;
}

#list li {
 padding: 16px 8px;
 background-color: #fc3e5b;
 margin: 12px 0;
 text-align: left;
 font-size: 22px;
}

#list li a {
 text-decoration: none;
 color: #fff;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title> Wikipedia Viewer </title>
  <link href="https://fonts.googleapis.com/css?family=Anton|Oxygen" rel="stylesheet">
  <link rel="stylesheet" href="wikipedia.css">
</head>
<body>  
  
  <div class="container-wrapper">
   <header>
     <h1> Wikipedia Viewer </h1>
   <form action="" name="myForm">
    <input type="text" name="search" /><button name="searchBtn">Search</button>
    <br>
    <button name="btnRandom" class="random"> Random<br>Article </button>
   </form>
 </header>
 
 <div class="container">
     <ul id="list"></ul>
 </div>
  </div>

  <script src="wikipedia.js"></script>
</body>
</html>

Answer 1

既然你提到你必须在按回车键后重新输入你写的内容，我假设表单正在提交。

你有一个条件语句，如果按下的键是 13 那么 eg.preventDefault () 但你没有传递表单提交事件。

试试这个：

document.querySelector ('form').addEventListener ('submit', requestData(e));

Answer 2

我已经更新了您的代码，请参阅此 fiddle 以获取工作代码 Ajax call on click of button

检查它是否根据您的需要工作。

这是我对您的代码所做的更改列表：-

我已将 "keydown" 事件更改为 "keyup" 事件，因为 "keydown" 我们没有收到按键的值。
我已经分离了搜索按钮点击事件的函数调用并输入按键事件使其更清晰。
我已经为搜索输入框指定了 id，以便在 "requestData()" 函数调用中获取它的值。
如果我们在表单中有（而不是输入类型 = "button"），那么单击按钮表单就会被提交。
我在 "requestData()" 中添加了 "event.preventDefault()" 作为第一行，因为按下输入按钮时表单会自动提交。
添加了一段以显示结果统计信息
将此行 document.myForm.innerHTML += 更改为 document.getElementById("results_stats").innerHTML

希望对您有所帮助。

HTML :-

<div class="container-wrapper">
<header>
  <h1> Wikipedia Viewer </h1>
  <form action="" name="myForm">
    <input type="text" name="search" id="txt_search" /><input type="button" name="searchBtn" value="Search"/>
    <br>
    <input type="button" name="btnRandom" class="random" value="Random Article"/>
  <p id="results_stats"></p>
  </form>
</header>

<div class="container">
    <ul id="list"></ul>
</div>

JAVASCRIPT :-

    var url = 'https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&origin=*&search=';
var inputSearch = document.myForm.search;
var searchBtn = document.myForm.searchBtn;
var list = document.getElementById("list");
var random = document.getElementsByClassName('random')[0];

random.addEventListener("click" , function(){
  window.open("https://en.wikipedia.org/wiki/Special:Random");
});

function getDataFromInputBox(e){
  console.log("Value Entered"+inputStr);

  if ( e.keyCode === 13 ) {
      requestData(e);
  }
}
function requestData(e) {
  e.preventDefault();
  console.log(e.target);
    var inputStr = document.getElementById("txt_search").value;
  if(inputStr != ""){
    console.log(inputStr);
  var request = new XMLHttpRequest();
  request.onreadystatechange = function () {
    if ( request.readyState === 4 ) {
      if ( request.status === 200 ) {
        var dataObj = JSON.parse(request.responseText);
        var titles = dataObj[1];
        var descriptions = dataObj[2];
        var links = dataObj[3];
        document.getElementById("results_stats").innerHTML = "<h2><span>" + links.length + "</span> results for \"" + "<span>" + inputStr + "</span>" +"\" </h2>"; 
        list.innerHTML = "";
        for ( var i = 0; i < titles.length; i++ ) {
          var li = "<li><a target='_blank' href=" + links[i] + ">" + titles[i] + "</a></li>";
          list.innerHTML += li;
        }
      }
      else {
        console.log("Server responded with following error code : " + request.status);
      }
    }
  };
  request.open("GET" , url + inputStr);
  request.send(null);
  //e.preventDefault(); 
  }
  else{
    document.getElementById("results_stats").innerHTML;
    list.innerHTML = "";
    alert("Enter a value");
  }
}

inputSearch.addEventListener("keyup" , getDataFromInputBox);
searchBtn.addEventListener("click" , requestData);
document.myForm.addEventListener("submit",requestData);

CSS :-

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS reset ends here */

body {
    font-size: 16px;
    font-family: 'Oxygen', sans-serif;

}

.container-wrapper {
    margin: 0 auto;
    text-align: center;
    height: 100vh;

}

header {
    /*background-color: #fc3e5b;*/
    padding: 80px 0;
}

header h1 {
    font-family: 'Anton', sans-serif; 
    font-size: 70px;
    padding: 30px 0 80px 0;
    color: #fc3e5b;
}

form input , form button {
    padding: 10px 8px;
    font-size: 22px;
    border: 1px solid #fc3e5b;
    outline: 0;
    display: inline;
    margin: 0;
}

form button {
    background-color: #fc3e5b;
    color: #fff;
}

h2 {
    font-size: 25px;
    margin-top: 32px;
}

h2 span {
    font-weight:bold;
    color: #fc3e5b;
}
.random {
    padding: 22px 7px;
    border-radius: 100%;
    margin: 20px 0 15px 0;
}

.random:hover {
    border: 5px solid #fc3e6b;
}

#list {
    width: 75%;
    margin: 0 auto;
}

#list li {
    padding: 16px 8px;
    background-color: #fc3e5b;
    margin: 12px 0;
    text-align: left;
    font-size: 22px;
}

#list li a {
    text-decoration: none;
    color: #fff;
}

如何在 Vanilla 中将点击和按键绑定到输入字段 JavaScript

How to bind click and keydown to input field in Vanilla JavaScript

javascript

ajax

events

click

keydown