本文介绍如何在特定textarea获得焦点时临时禁用某个JavaScript函数,并在失去焦点后恢复其功能。通过监听onfocus和onblur事件,动态修改window对象上的函数引用(如设为null或重新赋值),从而控制函数在特定输入框中的执行状态,适用于需要区分不同输入区域行为逻辑的场景。
在特定textarea中动态控制JS函数执行
当页面中存在一个textarea元素时,若需在该元素获取焦点期间屏蔽某个特定的JavaScript函数,
即让该函数在此时失效,而在焦点移出后重新生效,应如何实现这一功能?
1楼
可以在目标函数内部通过document.activeElement属性获取当前拥有焦点的DOM元素,判断其是否为该textarea,若是则直接返回,不执行后续逻辑。
2楼
上述方法正确,值得参考。
3楼
回复 meizz(梅花雪)
我尝试通过
document.activeElement.tagName.toLowerCase()!='textarea'
来判断当前是否聚焦于textarea控件,但页面中存在多个textarea元素,
我希望仅对其中一个特定的textarea屏蔽该函数,该如何处理?
更复杂的情况是,还有一个隐藏的textarea,除了readonly属性外,其他属性与该textarea完全一致,这种情况下又该如何实现?
4楼
可以通过onfocus和onblur事件来切换函数的启用与禁用状态。
<body>
<script language="JavaScript">
function disablefun()
{
window.myfun = null;
}
function enablefun()
{
window.myfun = function()
{
showid.innerHTML += "i'm active<br>";
};
}
function myfun()
{
showid.innerHTML += "i'm active<br>";
}
</script>
<form method="get" name=search id=search target="_blank">
每次键入内容均触发myfun函数<br>
<textarea name="txa" rows="5" cols="20" onkeydown="if(myfun)myfun()"></textarea>
<hr>
<br>
每次按键均不触发myfun函数(聚焦时失效,失焦时有效)<br>
<textarea name="txa" rows="5" cols="20" onfocus="disablefun()" onblur="enablefun()" onkeydown="if(myfun)myfun()"></textarea>
</form>
<div id=showid>
</div>
</body>