1、鼠标双击时,追加输入框修改li的值,根据1楼的同学的建议已经能够移除原本的值了
但是现在需要只修改文字,li里面的文字前面我之后会添加图片
2、输入框失去焦点失败
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<title>无标题文档</title>
<style>
li
{
list-style:none;
background-color:#3CC;
color:#000;
width:200px;
height:40px;
padding:3px;
margin:5px;}
</style>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<script>
$(function(){
$("li").dblclick(function () {
// 取消上次延时未执行的方法
//双击事件的执行代码
$text = $(this).text();
//$(this).append("<input value="+$text+"></input>");
//根据1楼的建议把上面的这句换成下面这句,但是图片也会没了
$(this).empty().append("<input value="+$text+" onblur='enter(this)'></input>");
$("input").select();
});
$("input").blur(function(){
if($(this).val()!="")
$(this).parent().append($(this).val());
else
$(this).parent().append("新建文件夹");
$(this).remove();
});
});
/*function enter(obj)
{
if($(obj).val()!="")
$(obj).parent().append($(obj).val());
else
$(obj).parent().append("新建文件夹");
$(obj).remove();
} */
</script>
</body>
</html>
$("li").dblclick(function () {
// 取消上次延时未执行的方法
//双击事件的执行代码
$text = $(this).text();
//$(this).html("<input value="+$text+"></input>"); 这个应该也可以
$(this).empty().append("<input value="+$text+"></input>");
$("input").select();
});
$(function(){
$("li").dblclick(function () {
// 取消上次延时未执行的方法
//双击事件的执行代码
$text = $(this).text();
$(this).append("<input value="+$text+"></input>");
$("input").select();
//增加这句看看
$('input').father('li').html('');
});
});
用replaceWith,替换也可以