jquery怎么样可以监听到最近一次失去焦点的dom

JavaScript010

jquery怎么样可以监听到最近一次失去焦点的dom,第1张

在可编辑的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>