互联网4A标准

我们一直走在国际的前沿,追求与研究从未停止

速成网站
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

javascript基础知识
直接双击页面元素进行修改的HTML代码
在腾讯空间和一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等。。
这些功能看似较难,其实实现起来很简单,只需几行代码就可实现。希望对一些新手有所帮助,高手请飘过~
注意代码中加粗部分。
<script type="text/javascript">
function ShowElement(element)
{
var oldhtml = element.innerHTML; //获得元素之前的内容
var newobj = document.createElement('input'); //创建一个input元素
newobj.type = 'text';  //为newobj元素添加类型
 
//设置newobj失去焦点的事件
newobj.onblur = function(){
element.innerHTML = this.value ? this.value : oldhtml; //当触发时判断newobj的值是否为空,为空则不修改,并返回oldhtml。
}
element.innerHTML = ''; //设置元素内容为空
element.appendChild(newobj); //添加子元素
 
newobj.focus(); //获得焦点
}
</script>


<dl>
<dt>用户名:</dt>
<dd ondblclick="ShowElement(this)">笨笨狼</dd>
<dt>个人宣言</dt>
<dd ondblclick="ShowElement(this)">这家伙很懒,什么也没留下!</dd>

想了解更多,请访问齐创互联,点击东莞网站建设查看,需要网站建设,网站制作,浏览网站模板快速建站
点击在线客服联系,联系电话:15811653920 联系人: 丁生.

建站龙头,低价保证,贴心服务

权威认证建站龙头企业,合理定价,实现与客户的长期合作,30万家企业级用户优选!