当前位置:asp编程网>技术教程>Javascript教程>  正文

jquery文本框input加回车事件

2018-01-09 10:55:47   来源:www.aspbc.com   作者:wangsdong   浏览量:486   收藏

功能:
在使用ajax做无刷新修改某个div中的值的时候,先点击某个文字,出现一个input文本框,并将文字放到方本框中,然后修改文本框中的文字,修改好后,鼠标移开,文本框中的文字就覆盖掉input的所在的div。

我想实现文本框中的文字修改好后,按下回车键也可以用”文本框中的文字就覆盖掉input的所在的div“的效果。

也就是按回车键和鼠标移开效果一样。

代码如下:

  <title>jquery文本框input加回车事件</title>
  <style>
  #id1{ cursor:pointer }
  </style>
  <script src="jquery.js"></script>
  <script>
  $(function(){
	  var flg = false;
	  $("#id1").click(function(){
		  if(flg == false){
		      $(this).html("<input value='"+$(this).html()+"'>");
			  flg = true;
			  $(this).find("input").focus().blur(function(){
				  $("#id1").html($(this).val());
				  flg = false;
			  }).keypress(function(e){
                    // 回车键事件
                    if(e.which == 13) {
                        $(this).blur();
                    }
                });
		  }
	  });
  });
  </script>
<div id="id1">www.aspbc.com</div>
将这代码保存为.html文件,双击文件运行一下。分别试试鼠标移开和回车,就能看到效果了。


关于我们-广告合作-联系我们-积分规则-网站地图

Copyright(C)2013-2017版权所属asp编程网