当前位置: 编程技术>jquery
Jquery 鼠标点击文字变文本框的实现代码
来源: 互联网 发布时间：2014-09-03
本文导语: 本节内容： 鼠标点击文字显示文本框的实现代码。 如何用JS实现鼠标点击文字变文本框的效果呢，很多的cms都支持这样的效果，简单而实用。 本来是一段文本，当你点击了文字后，这个文字变成了可以编辑的状态。 当编辑...
本节内容：
鼠标点击文字显示文本框的实现代码。
如何用JS实现鼠标点击文字变文本框的效果呢，很多的cms都支持这样的效果，简单而实用。
本来是一段文本，当你点击了文字后，这个文字变成了可以编辑的状态。
当编辑完毕，失去焦点时，修改文本的内容。
1，css部分
代码示例:
body{font-size:13px;}
.sortname{height:30px;}
2，js代码部分
代码示例:
$(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("");
$(this).find(".sort_input").focus();
$(this).find(".sort_input").bind("blur", function(){
var n = $.trim($(this).val());
if(n != m && n != ""){ // www.
//window.location = "sort.php?val="+encodeURIComponent(n);
//发送信息
$(this).parent().html(n);
}else{
$(this).parent().html(name);
}
});
});
});
谷歌
脚本学堂
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。