jquery设置焦点并触发事件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery设置焦点并触发事件相关的知识,希望对你有一定的参考价值。

<script type="text/javascript">
$(function()
$("#two").focus();
$("div").focus(function()//这里是指DIV里的焦点
$(this).keydown(function()
alert($(this).html());//FF下没有反应,IE下可以
);
);
);
</script>
<body>
<div id="one">oooo</div>
<div id="two">tttt</div>
<div id="three">hhhh</div>
</body>
FF下按回车没有反应,请问问题在哪里?
工作流程就是:

打开网页 直接设置 #two为焦点,按回车 显示焦点内容

首先我要说你的事件注册的不对,应该这样写:
$("#two").focus();
$("div").keydown(function(e)
if(e.keyCode == 13)
alert($(this).html());

);
其次,div默认是不能focus的,所以你的焦点就没进去。
如果你实在是要实现div的focus,并且按回车显示内容的话,我有一个办法能达到你的效果。
把三个div换成这样:
<div id="one" contenteditable="true">oooo</div>
<div id="two" contenteditable="true">tttt</div>
<div id="three" contenteditable="true">hhhh</div>
不管IE还是火狐都能达到你的效果。
参考技术A 触发每一个匹配元素的focus事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数,注意,某些对象不支持focus方法。

上面是官方帮助文档中所说的focus事件函数的解释。
很明显了 对于一些元素标签,是无法设置焦点的,如果你能按tab键选择得到的元素 才能focus()

比如 <a>标记 <input/>标记 <textarea>标记等等
对于那些无法获取焦点的元素 那肯定是会存在兼容性问题的。

对于一个div元素,如果设置了此元素的 contenteditable="true" 这个属性,就可以在这个div里面输入内容,这样这个div就可以focus()。但这样 这个div就变成了可编辑的。你可以为这个div再设置一个onkeydown事件 让这个事件直接return false ==>onkeydown="return false" 这样就没办法编辑,但可以复制粘贴。。。。

jquery事件

jquery事件

事件函数列表:

blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数,依次运行多个函数
unload() 用户离开页面

 

绑定事件的其他方式

$(function(){
    $(‘#div1‘).bind(‘mouseover click‘, function(event) {
        alert($(this).html());
    });
});

 

取消绑定事件

$(function(){
    $(‘#div1‘).bind(‘mouseover click‘, function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind(‘mouseover‘);

    });
});

 

以上是关于jquery设置焦点并触发事件的主要内容,如果未能解决你的问题,请参考以下文章

jquery js 当文本框获得焦点时,自动选中里面的文字

jquery validate 表单验证插件

jQuery失去焦点触发事件,现在会出现alert循环出现的状况

jQuery基础篇

jQuery之事件even

关闭 Access 并引发“无法将焦点移至控件”错误时触发加载事件