JS双击div编辑文本内容
HTML代码:
1 2 3 4 | < 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代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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); }); } } }); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步