草庐IT

javascript - 在表单字段中模拟回车键并保留其他处理程序

coder 2023-08-05 原文

我们正在尝试为我们正在开发的与表单字段相关联的软件开发一种通用方法。

到目前为止一切顺利，但我们遇到了一种边缘情况，该情况会阻止提交绑定(bind)了另一个处理程序的表单/字段。

这是(浓缩的)用例:

HTML:

<form id="form1">
  <input type=field id="field1"/>
</form>
<a href="#" id="link">click to submit</a>

正常行为是，当用户在字段中键入“foo”并按下回车键时，表单将被处理并提交到正确的“端点”，而这不一定是表单开始标记中定义的端点。可能有一些函数(来自其他地方)处理这个输入事件。

不幸的是，我们无法预测那个函数是什么，我们希望保持它的通用性。

在上面的 HTML 中，单击链接应该会在表单字段上触发一个输入事件，该事件会模仿浏览器/用户的行为，从而触发一些未知的处理程序。

这是我们的 Javscript(我们正在使用 jquery):

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    //return false; only if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
})

当在字段中输入“foo”并按回车键时，表单将被提交。但是，当我们单击链接时，我们执行 focus() 然后触发键事件，但表单未提交。

由于处理程序未知，我们无法使用 submit()。

尝试这里的代码:http://codepen.io/conversify/pen/yOjQob

最佳答案

按下回车键时发生的事情是，如果输入在表单内，则提交表单。这是默认行为。当您模拟按键时，您应该做同样的事情，除非默认行为被阻止。

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    // event.preventDefault(); if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
  var form=$("#field1").closest("form");
  if(form&&!e.isDefaultPrevented()) form.submit();
})

现在您可以将事件对象传递给处理程序，它们可以根据需要阻止提交，或者您可以在按键处理程序中阻止提交。

关于javascript - 在表单字段中模拟回车键并保留其他处理程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36691525/

javascript在34sectionfieldjqueryhtmlforms

有关javascript - 在表单字段中模拟回车键并保留其他处理程序的更多相关文章

  1. ruby - 其他文件中的 Rake 任务 - 2

    我试图在一个项目中使用rake，如果我把所有东西都放到Rakefile中，它会很大并且很难读取/找到东西，所以我试着将每个命名空间放在lib/rake中它自己的文件中，我添加了这个到我的rake文件的顶部:Dir['#{File.dirname(__FILE__)}/lib/rake/*.rake'].map{|f|requiref}它加载文件没问题，但没有任务。我现在只有一个.rake文件作为测试，名为“servers.rake”，它看起来像这样:namespace:serverdotask:testdoputs"test"endend所以当我运行rakeserver:testid时

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  4. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  5. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  6. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  7. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  8. ruby-on-rails - 在 Rails 和 ActiveRecord 中查询时忽略某些字段 - 2

    我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr

  9. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  10. java - 我的模型类或其他类中应该有逻辑吗 - 2

    我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我

随机推荐