<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<span class="t1">默认分组</span>
<a class="t2">编辑</a>
<p>说明:点击编辑,可修改默认分组的文字内容</p>
<script>
$(function () {
//获取class为caname的元素
$(".t2").click(function () {
var td = $(".t1");
console.info(td[0]);
var txt = td.text();
//通过jquery构造对应的input标签元素
var input = $("<input type='text' value='" + txt + "'/>");
td.html(input);
input.click(function () {
return false;
});
//获取焦点,trigger() 方法触发被选元素的指定事件类型。
input.trigger("focus");
//文本框失去焦点后提交内容,重新变为文本
input.blur(function () {
var newtxt = $(this).val();
//判断文本有没有修改
if (newtxt !== txt) {
td.html(newtxt);
} else {
td.html(newtxt);
}
});
});
});
</script>
</body>
</html>
html实现可编辑文字效果
猜你喜欢
转载自blog.csdn.net/qq_35077107/article/details/104594793
今日推荐
周排行