Is it possible to focus on a <div>
using JavaScript focus()
function?
是否可以使用JavaScript focus()函数来关注
I have a <div>
tag
我有一个
<div id="tries">You have 3 tries left</div>
I am trying to focus on the above <div>
using :
我正试图集中在上面的
document.getElementById('tries').focus();
But it doesn't work. Could someone suggest something....?
但它不工作。有人建议....吗?
8 个解决方案
#1
86
window.location.hash = '#tries';
This will scroll to the element in question, essentially "focus"ing it.
这将滚动到问题中的元素,本质上是“聚焦”它。
#2
314
Yes - this is possible. In order to do it, you need to assign a tabindex...
是的——这是可能的。为了做到这一点,您需要分配一个表索引……
<div tabindex="0">Hello World</div>
A tabindex of 0 will put the tag "in the natural tab order of the page". A higher number will give it a specific order of priority, where 1 will be the first, 2 second and so on.
tabindex(0)将标签“按照页面的自然制表符顺序”放置。更高的数字将赋予它一个特定的优先级顺序,其中1将是第一个,2秒等等。
You can also give a tabindex of -1, which will make the div only focus-able by script, not the user.
您还可以给出-1的tabindex,这将使div只能由脚本而不是用户来实现。
document.getElementById('test').onclick = function () {
document.getElementById('scripted').focus();
};
div:focus {
background-color: Aqua;
}
<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>
Obviously, it is a shame to have an element you can focus by script that you can't focus by other input method (especially if a user is keyboard only or similarly constrained). There are also a whole bunch of standard elements that are focusable by default and have semantic information baked in to assist users. Use this knowledge wisely.
显然,有一个元素可以通过脚本集中,而其他的输入方法不能集中,这是一种遗憾(特别是如果用户只是键盘或类似的限制)。还有一大堆标准元素是默认可调焦的,并且包含语义信息以帮助用户。明智地使用这些知识。
#3
63
document.getElementById('tries').scrollIntoView()
works. This works better than window.location.hash
when you have fixed positioning.
. getelementbyid(试).scrollIntoView()的工作原理。这比window.location更好。当你有固定的定位时哈希。
#4
11
<div id="inner" tabindex="0">
this div can now have focus and receive keyboard events
</div>
#5
11
You can use tabindex
您可以使用tabindex
<div tabindex="-1"></div>
The tabindex value can allow for some interesting behaviour.
tabindex值可以允许一些有趣的行为。
- If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
- 如果给定一个值为“-1”,则不能将元素制表为-1,但是可以通过编程方式将焦点赋给元素(使用element.focus()))。
- If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. Values greater than 0 create a priority level with 1 being the most important.
- 如果给定值为0,则该元素可以通过键盘进行集中,并落入文档的列表流中。大于0的值创建一个优先级,其中1是最重要的。
#6
2
I wanted to suggest something like Michael Shimmin's but without hardcoding things like the element, or the CSS that is applied to it.
我想推荐一些类似Michael Shimmin的东西,但是不需要硬编码,比如元素或者应用到它的CSS。
I'm only using jQuery for add/remove class, if you don't want to use jquery, you just need a replacement for add/removeClass
我只在add/remove类中使用jQuery,如果您不想使用jQuery,只需替换add/removeClass
--Javascript
——Javascript
function highlight(el, durationMs) {
el = $(el);
el.addClass('highlighted');
setTimeout(function() {
el.removeClass('highlighted')
}, durationMs || 1000);
}
highlight(document.getElementById('tries'));
--CSS
CSS——
#tries {
border: 1px solid gray;
}
#tries.highlighted {
border: 3px solid red;
}
#7
1
This will also scroll the browser to coresponding element with id
这也将滚动浏览器到带有id的coresponding元素。
var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;
target.parentNode.scrollTop
can be replaced with window.scrollTop
if you want to scroll entire window
target.parentNode。可以用窗口替换滚动顶。如果您想要滚动整个窗口,则可以使用scrollTop。
#8
0
To make the border flash you can do this:
要制作边框动画,你可以这样做:
function focusTries() {
document.getElementById('tries').style.border = 'solid 1px #ff0000;'
setTimeout ( clearBorder(), 1000 );
}
function clearBorder() {
document.getElementById('tries').style.border = '';
}
This will make the border solid red for 1 second then remove it again.
这将使边框在一秒内变为红色,然后再次删除它。
#1
86
window.location.hash = '#tries';
This will scroll to the element in question, essentially "focus"ing it.
这将滚动到问题中的元素,本质上是“聚焦”它。
#2
314
Yes - this is possible. In order to do it, you need to assign a tabindex...
是的——这是可能的。为了做到这一点,您需要分配一个表索引……
<div tabindex="0">Hello World</div>
A tabindex of 0 will put the tag "in the natural tab order of the page". A higher number will give it a specific order of priority, where 1 will be the first, 2 second and so on.
tabindex(0)将标签“按照页面的自然制表符顺序”放置。更高的数字将赋予它一个特定的优先级顺序,其中1将是第一个,2秒等等。
You can also give a tabindex of -1, which will make the div only focus-able by script, not the user.
您还可以给出-1的tabindex,这将使div只能由脚本而不是用户来实现。
document.getElementById('test').onclick = function () {
document.getElementById('scripted').focus();
};
div:focus {
background-color: Aqua;
}
<div>Element X (not focusable)</div>
<div tabindex="0">Element Y (user or script focusable)</div>
<div tabindex="-1" id="scripted">Element Z (script-only focusable)</div>
<div id="test">Set Focus To Element Z</div>
Obviously, it is a shame to have an element you can focus by script that you can't focus by other input method (especially if a user is keyboard only or similarly constrained). There are also a whole bunch of standard elements that are focusable by default and have semantic information baked in to assist users. Use this knowledge wisely.
显然,有一个元素可以通过脚本集中,而其他的输入方法不能集中,这是一种遗憾(特别是如果用户只是键盘或类似的限制)。还有一大堆标准元素是默认可调焦的,并且包含语义信息以帮助用户。明智地使用这些知识。
#3
63
document.getElementById('tries').scrollIntoView()
works. This works better than window.location.hash
when you have fixed positioning.
. getelementbyid(试).scrollIntoView()的工作原理。这比window.location更好。当你有固定的定位时哈希。
#4
11
<div id="inner" tabindex="0">
this div can now have focus and receive keyboard events
</div>
#5
11
You can use tabindex
您可以使用tabindex
<div tabindex="-1"></div>
The tabindex value can allow for some interesting behaviour.
tabindex值可以允许一些有趣的行为。
- If given a value of "-1", the element can't be tabbed to but focus can be given to the element programmatically (using element.focus()).
- 如果给定一个值为“-1”,则不能将元素制表为-1,但是可以通过编程方式将焦点赋给元素(使用element.focus()))。
- If given a value of 0, the element can be focused via the keyboard and falls into the tabbing flow of the document. Values greater than 0 create a priority level with 1 being the most important.
- 如果给定值为0,则该元素可以通过键盘进行集中,并落入文档的列表流中。大于0的值创建一个优先级,其中1是最重要的。
#6
2
I wanted to suggest something like Michael Shimmin's but without hardcoding things like the element, or the CSS that is applied to it.
我想推荐一些类似Michael Shimmin的东西,但是不需要硬编码,比如元素或者应用到它的CSS。
I'm only using jQuery for add/remove class, if you don't want to use jquery, you just need a replacement for add/removeClass
我只在add/remove类中使用jQuery,如果您不想使用jQuery,只需替换add/removeClass
--Javascript
——Javascript
function highlight(el, durationMs) {
el = $(el);
el.addClass('highlighted');
setTimeout(function() {
el.removeClass('highlighted')
}, durationMs || 1000);
}
highlight(document.getElementById('tries'));
--CSS
CSS——
#tries {
border: 1px solid gray;
}
#tries.highlighted {
border: 3px solid red;
}
#7
1
This will also scroll the browser to coresponding element with id
这也将滚动浏览器到带有id的coresponding元素。
var target = document.getElementById("target");
target.parentNode.scrollTop = target.offsetTop;
target.parentNode.scrollTop
can be replaced with window.scrollTop
if you want to scroll entire window
target.parentNode。可以用窗口替换滚动顶。如果您想要滚动整个窗口,则可以使用scrollTop。
#8
0
To make the border flash you can do this:
要制作边框动画,你可以这样做:
function focusTries() {
document.getElementById('tries').style.border = 'solid 1px #ff0000;'
setTimeout ( clearBorder(), 1000 );
}
function clearBorder() {
document.getElementById('tries').style.border = '';
}
This will make the border solid red for 1 second then remove it again.
这将使边框在一秒内变为红色,然后再次删除它。