Jquery 鼠标点击文字变文本框的实现代码

发布时间:2019-10-12编辑:脚本学堂
这个效果蛮好用的,当鼠标点击文字时显示出文本框,用jquery脚本实现的,有需要的朋友参考下吧。

本节内容:
鼠标点击文字显示文本框的实现代码。

如何用JS实现鼠标点击文字变文本框的效果呢,很多的cms都支持这样的效果,简单而实用。
本来是一段文本,当你点击了文字后,这个文字变成了可以编辑的状态。
当编辑完毕,失去焦点时,修改文本的内容。

1,css部分
 

复制代码 代码示例:
<style type="text/css">
  body{font-size:13px;}
  .sortname{height:30px;}
</style>

2,js代码部分
 

复制代码 代码示例:
<script src="/js/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".sortname").click(function(){
   if($(this).find(".sort_input").attr("type") == "text"){return false;}
   var name = $.trim($(this).html());
   var m = $.trim($(this).text());
   $(this).html("<input type=text value=""+name+"" class="sort_input">");
   $(this).find(".sort_input").focus();
   $(this).find(".sort_input").bind("blur", function(){
  var n = $.trim($(this).val());
  if(n != m && n != ""){ // www.jb200.com
    //window.location = "sort.php?val="+encodeURIComponent(n);
    //发送信息
    $(this).parent().html(n);
  }else{
    $(this).parent().html(name);
  }
   });
  });
});
</script>
</head>
<body>
<div class="sortname">百度</div>
<div class="sortname">谷歌</div>
<div class="sortname">脚本学堂</div>