[jQuery] input输入框扩展(回车提交，监听input值)

最新推荐文章于 2023-10-17 17:32:03 发布

weixin_30346033

最新推荐文章于 2023-10-17 17:32:03 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/SoYang/p/11212626.html

本文介绍了一种在网页中实现输入框扩展功能的方法，包括通过监听输入框内容变化显示清除按钮及通过键盘回车键提交内容。使用jQuery简化DOM操作与事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

扩展功能

　　1. 回车提交

　　2. 有内容时，有“X”清除

思路

　　1. 用propertychange事件来监听对象属性的变化

　　2. 判断用户按键是否是回车来提交

代码

  // 监听input的值变化
  $("input.search").bind("input propertychange", function () {
    if ($(this).val() != "") {
        $("a.search-reset").fadeIn();
    } else {
        $("a.search-reset").fadeOut();
    }
  });
  // 点击消除内容
  $("a.search-reset").click(function () {
      $(this).siblings(".search").val("");
      $(this).fadeOut();
  });
	// 判断是不是回车
  $("input.search").keypress(function (e) {
    	// 兼容写法
      e = e || window.event;
      key = e.keyCode || e.which || e.charCode;
      if (key == 13) {
          alert("发送AJAX请求")
      }
  });
  // 点击SEARCH按钮
  $("a.search-button").click(function (e) {
      alert("发送AJAX请求")
  });

Demo

转载于:https://www.cnblogs.com/SoYang/p/11212626.html