JS双击div编辑文本内容

最新推荐文章于 2023-07-21 07:19:02 发布

转载最新推荐文章于 2023-07-21 07:19:02 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rnckty/p/4094235.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用jQuery实现的双击编辑相册名称的功能。通过将相册名称替换成可编辑的输入框，用户可以在双击后修改相册名。该功能还包括简单的验证，确保相册名不为空且不含空格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码：

<div class="album">
	<div class="image"><a href="javascript:;" onclick="view({$vo.id})"><img src="{$vo.img}" /></a></div>
	<div class="name" id="{$vo.id}" ondblclick="edit(this,{$vo.id})">{$vo.name}</div>
</div>

JQuery代码：

function edit(msg,id){
	var text = $(msg).text();
	$(msg).html("<input type='text' name='album' value='"+text+"' size=20");
	$("input[name='album']").focus();
	$("input[name='album']").blur(function(){
		var name = $(this).val();
		if(name.indexOf(" ") >= 0 || name == ""){
			alert("相册名称不能为空且不能含有空格！");
			$("input[name='album']").focus();//获取焦点
			$("input[name='album']").select();//input内容选中
		}else{
			if(text == name){
				$(msg).html(text);
			}else{
				$.get( url+"edit?id="+id+"&name="+encodeURI(name), function(result){
					if(result != ''){alert(result);}
					$(msg).html(name);
				});
			}
		}
	});
}

转载于:https://www.cnblogs.com/rnckty/p/4094235.html