如何模拟回车键复制提交键？

Question

我正在制作一个带有文本区域的天气应用程序，如果您单击“提交”，您将看到天气结果。 现在，我想制作它以便您可以单击 enter 查看数据。 这是一些代码：

    <section class="inputs">
        <input type="text" placeholder="Enter any city..." id="cityinput">
        <input type="submit" value="Submit" id="add">
        <button placeholder="submit" id="add"></button>
    </section>

这是一些 javascript 代码：

   btn.addEventListener('click', function(){

//This is the api link from where all the information will be collected

        fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
            .then(res => res.json())

            //.then(data => console.log(data))

            .then(data => {

//Now you need to collect the necessary information with the API link. Now I will collect that information and store it in different constants.

                var nameval = data['name']
                var tempature = data['hourly']['pop']
//Now with the help of innerHTML you have to make arrangements to display all the information in the webpage.
                city.innerHTML=`Weather of <span>${nameval}<span>`
                temp.innerHTML = ` <span>${ tempature} </span>`


            })

Answer 1

您需要将一个侦听器附加到您的文本区域，如果用户按下enter键，那么您将执行您的呼叫（此处通过警报模拟）并阻止默认设置，以免 go 换行。 在任何其他情况下，不要采取任何行动

 const textArea = document.querySelector('textarea'); textArea.addEventListener('keydown', e => { if (e.key === 'Enter') { window.alert('Sending data...'); e.preventDefault(); } });

 <textarea placeholder="Type and press enter"></textarea>

您可以将submit代码放在 function 中，并在这两种情况下调用 function：

function submitAction() {
  fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputval.value+'&appid='+apik)
  .then(res => res.json())
  .then(data => {
      const nameval = data['name']
      const tempature = data['hourly']['pop']
      city.innerHTML=`Weather of <span>${nameval}<span>`
      temp.innerHTML = ` <span>${ tempature} </span>`
   });
}

然后：

  if (e.key === 'Enter') {
    submitAction();
    e.preventDefault();
  }

和：

 btn.addEventListener('click', () => submitAction());

Answer 2

您可以使用 HTML 表单并使用表单提交事件：

<form id="form">
    <input type="text" placeholder="Enter any city..." id="cityinput" />
    <button type="submit">Submit</button>
</form>

在事件侦听器中，一旦submit事件被触发，您就可以从输入中读取值。 或者，您可以 go 在event object 中查找输入值。

var form = document.getElementById('form');
form.addEventListener('submit', function(event) {
  const inputValue = document.querySelector('input').value;
        event.preventDefault();
        fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue+'&appid='+apik)
            .then(res => res.json())
            .then(data => {
                var nameval = data['name']
                var tempature = data['hourly']['pop']
                city.innerHTML=`Weather of <span>${nameval}<span>`
                temp.innerHTML = ` <span>${ tempature} </span>`
            })
});

Answer 3

您需要为 keydown 事件创建侦听器并检查是否输入了单击的键：

const textarea = document.querySelector(".some-class");

textarea.addEventListener("keydown", function(e) {
    if(e.key === "Enter") {
        // your code
    }
});

<textarea class="some-class"></textarea>