在可编辑的DIV里,加上blur事件,就是当失去焦点时,获取失去焦点的DIV的ID,然后保存到全局变量里,这样你在做添加图片时,可以直接读取这个全局变量来获取最后是哪个DIV失去了焦点。
用jquery的话,一句代码就能为所有的DIV添加上失去焦点事件:
$("div").on("blur",function(){var id=$(this).prop("id")
})
上面是为所有的DIV绑定了事件,但你可以在实际中,根据自己的需要来“缩小范围”,比如你要监听的只是其中包含“edit”样式的DIV,改成:
$("div.edit").on("blur",function(){var id=$(this).prop("id")
})
你要插入图片的话,要不要记录光标所在的位置?
你说的是从form元素切换的时候...会自动检查数据..那样blur就触发window.onblur是吧....我估计你是不是这样写的:
<script>
//error this ->window
function checkform(){
if(this.value==""){
this.focus()
this.className="highlight"
}
}
</script>
<style>
.highlight{
border:1px solid red
background:yellow
}
</style>
</head>
<body>
<form>
Name:<input id="name" size=20 onblur="checkform(this)"><br/>
Email:<input id="email" size=20>
</form>
</body>
这样传递this确实会传进去..但是这里不可以在函数里再次使用this..否则..this就会指向window...这个有点特殊要涉及到JS的上下文对象的问题..我记得有一次也有个人问这个问题的...
当this在script标签中出现的时候..它就会出现这个上下文对象的问题...这个时候的this总是指向包围它的那个对象...比如...
利用加载后触发事件:
window.onload=function(){
document.getElementById("name").onblur=function(){
if(this.value==""){
this.focus()
this.className="highlight"
}
}
}
</script>
<style>
.highlight{
border:1px solid red
background:yellow
}
</style>
</head>
<body>
<form>
Name:<input id="name" size=20><br/>
Email:<input id="email" size=20>
</form>
</body>
这个时候..当窗口加载完成后..它执行..查找ID为XX的元素...然后当这个元素blur的时候..这个时候..利用匿名函数..this就会指向ID的这个元素...
也就是说...当想让this指向一个元素的时候...这个对象必须包围this..产生上下文对象..否则..this总是指向window...
如..
<script>
var foo="check"
alert(this.foo)
//display "check"
</script>
此时this就指向window...
这个代码这样写也是可以的..
window.onload=function(){
document.getElementById("name").onblur=checkform
}
function checkform(){
if(this.value==""){
this.focus()
this.className="highlight"
}
}
这样..this还是指向id的元素...
象你利用this传递值后....必须指定另一个形参来接受它这个值..因为function它是在全局状态下定义的...function此时就是window的一个方法而已...
比如这样写..
<script>
function checkform(elem){
if(elem.value==""){
elem.focus()
elem.className="highlight"
}
}
</script>
<style>
.highlight{
border:1px solid red
background:yellow
}
</style>
</head>
<body>
<form>
Name:<input id="name" size=20 onblur="checkform(this)"><br/>
Email:<input id="email" size=20>
</form>
</body>
</html>