为任何元素指定操作按钮 jQuery默认按钮

  • 源码大小:8.56KB
  • 所需积分:1积分
  • 源码编号:19JP-3419
  • 浏览次数:607次
  • 最后更新:2023年06月11日
  • 所属栏目:表单
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Default Button是一个小型jQuery插件,它允许您为指定的元素分配一个按钮,当您在该元素内按Enter键时,该按钮将被单击。

对于在任何文本输入处按ENTER键后提交HTML表单都很有用。

如何使用它:

1.下载并加载jQuery之后的默认按钮插件的缩小版。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/dist/jquery-default-button.min.js"></script>

2.按如下方式为元素指定按钮:

  1. <!-- Element 1 -->
  2. <div id="Div1">
  3. Pressing enter in either of these textboxes will press Button1.<br />
  4. <input type="text"/>
  5. <input type="text"/>
  6. </div>
  7.  
  8. <!-- Element 2 -->
  9. <div id="Div2">
  10. Pressing enter in either of these textboxes will press Button2.<br />
  11. <input type="text"/>
  12. <input type="text"/>
  13. </div>
  14.  
  15. <!-- Button 1 -->
  16. <input type="button" id="Button1" value="Button1" />
  17.  
  18. <!-- Button 2 -->
  19. <input type="button" id="Button2" value="Button2" />

3.初始化默认按钮插件并完成。

  1. $(document).ready(function(){
  2.  
  3. // Button 1
  4. $("#Div1").defaultButton("#Button1");
  5.  
  6. // Button 2
  7. $("#Div2").defaultButton("#Button2");
  8.  
  9. // for test purpose
  10. $("input[type=button]").on("click", function(){
  11. alert("You pressed " + $(this).attr("id"));
  12. });
  13. });

预览截图