点击回车刷新页面jQuery

Posted 2023-05-09

【中文标题】点击回车刷新页面jQuery

【英文标题】：Hitting enter refreshes the page jQuery

【发布时间】：2021-06-03 12:13:03

【问题描述】：

我已经编写了一些代码来使用 jQuery 创建一个待办事项列表。如果我按 Enter 键，它应该将输入提交到下面的列表中，但问题是页面会刷新，就好像它正在提交表单一样。我已经在 SO 上检查了多个线程，但我没有找到解决方案。

Stop reloading page with 'Enter Key'

Prevent users from submitting a form by hitting Enter

我已尝试添加 e.preventDefault(); 和 return: false; 这会停止刷新，但也会阻止在按 Enter 后添加到列表中。

我在 html 表单标签中尝试了以下内容：

onSubmit="return false;"

action="#"

我的 IIFE 是否有问题导致此问题？

let checklist = (function() 
  function newItem() 

    let li = $('<li></li>');
    let inputValue = $('#input').val();
    let input = $('#input');
    let deleteIcon = $('<div></div>');

    function crossOut() 
      li.toggleClass('strike');
    

    function deleteListItem() 
      li.addClass('delete');
    

    if (inputValue === '') 
      alert('You must write something!');
     else 
      $('#list').append(li);
      input.val('')
    
    
    deleteIcon.append(document.createTextNode('X'));
    li.append(deleteIcon);
    li.append(inputValue);
    
    deleteIcon.on('click', deleteListItem);
    li.on('dblclick', crossOut);

    $('#list').sortable();
  
  
  return 
    newItemf: newItem
  ;

)();

$('#button').on('click', checklist.newItemf)

$(window).on('keypress', function (e)
  if(e.which == 13) 
    checklist.newItemf;
    return false;
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="toDoList">
        <input type="text" name="ListItem" id="input">
      </form>

      <div id="button">Add</div>
      <br/>
      <ol id="list"></ol>

【问题讨论】：

这能回答你的问题吗？ Stop reloading page with 'Enter Key'.The accepted answer说明需要绑定formsubmit事件。

我试过了，但除非我的语法错误，否则它不起作用。

【参考方案1】：

阻止这种情况的最简单方法是捕获 onSubmit event 并返回 false。我认为以下内容就足够了：

$('form').on('submit', function(e) 
    e.preventDefault();
    return false;
);

【讨论】：

我试过了，但它也会在按下回车时停止添加按钮功能。

如果您希望表单提交的行为与单击按钮时相同，您可以手动调用单击按钮$('#button').click() 或简单地调用单击事件调用的相同函数checklist.newItemf()在表单提交处理程序中

【参考方案2】：

我找到了解决方案，但我不完全明白为什么我不需要 return false；

也许是我试图在“输入”被按下而不是阻止所有输入时提交输入。谢谢@isick，因为您的回答为我指明了正确的方向！

这是需要的代码！

$('form').on('submit', checklist.newItemf)