按钮提交在url后添加字段_在输入字段上定向单击“清除”按钮（X）

按钮提交在url后添加字段

jQuery makes it easy to get your project up and running. Though it's fallen out of favor in recent years, it's still worth learning the basics, especially if you want quick access to its powerful methods.

jQuery使您可以轻松启动和运行项目。 尽管近年来它不受欢迎，但仍然值得学习基础知识，尤其是如果您想快速使用其强大的方法。

But while jQuery is a powerful library, it can't do everything. That's where having solid understanding of vanilla JavaScript comes in handy.

但是，尽管jQuery是一个功能强大的库，但它无法完成所有工作。 在那里，对香草JavaScript有扎实的了解非常有用。

Say you have a Wikipedia Viewer project like this:

假设您有一个像这样的Wikipedia Viewer项目：

$("#searchbox").keyup(function(event) {
  if(event.keyCode === 13) {
    $("#searchbutton").click();
  };
});

$("#searchbutton").click(function() {
  
  var searchInput = document.getElementById("searchbox").value;
  searchInput = searchInput.toLowerCase();
  
  if(searchInput !== "") {
  
    var myRequest = new XMLHttpRequest();
    myRequest.open('GET','https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch='+ searchInput + '&utf8=&format=json&origin=*');
  
      myRequest.onload = function() {
      var searchResults = JSON.parse(myRequest.responseText);
      
      $(".resultingarticles").empty();  
        
      for(i=0; i<10; i++) {
        var articleTitle = searchResults.query.search[i].title;
        var articleSnippet = searchResults.query.search[i].snippet;
        var articleId = searchResults.query.search[i].pageid;
        var articleLink = "https://en.wikipedia.org/?curid=" + articleId;
        $(".resultingarticles").append("<a href='" + articleLink + "' target='_blank'>" + "<div class='article'>" + "<p>"+articleTitle+"</p>" + "<p>" + articleSnippet + "</p>" + "</div>" + "</a>");
      };
        
      };
    
    myRequest.send();
    
  };
});

Everything is working as you expect – you can enter text into the search box, hit enter or the "Search" button, and see a list of Wikipedia articles.

一切都按预期运行-您可以在搜索框中输入文本，按Enter或“搜索”按钮，然后查看Wikipedia文章列表。

Because you're using type="search" on your input element, the Chrome browser will automatically add an "X" to the end of the input if there's text and you hover over the input. Note that other browsers might handle type="search" differently.

由于您在input元素上使用type="search" ，因此如果有文本并将鼠标悬停在输入上，Chrome浏览器会自动在输入末尾添加“ X”。 请注意，其他浏览器可能会不同地处理type="search" 。

When you click on the "X", the text disappears.

当您单击“ X”时，文本消失。

But say you already have a list of articles, and when you clear the text, you also want to clear the populated articles:

但是说您已经有文章列表，并且在清除文本时，您还希望清除填充的文章：

It turns out that clicking the "X" in the search box fires a "search" event. jQuery doesn't support the "search" event, so you'll have to write an event listener in vanilla JavaScript:

事实证明，单击搜索框中的“ X”会触发“搜索”事件。 jQuery不支持“搜索”事件，因此您必须使用原始JavaScript编写事件监听器：

document.getElementById("searchbox").addEventListener("search", function(event) {
  $(".resultingarticles").empty();  
});

Now when a search event is fired, you can use jQuery to clear the div element with the articles:

现在，当触发搜索事件时，您可以使用jQuery清除以下文章中的div元素：

翻译自: https://www.freecodecamp.org/news/targeting-click-of-clear-button-x-on-input-field/

按钮提交在url后添加字段