我正在寻找一个允许聚焦的HTML元素的确定列表,即哪些元素在focus()被调用时会被聚焦？
我正在编写一个jQuery扩展,它可以处理可以引起关注的元素.我希望这个问题的答案能让我具体说明我所针对的要素.
我正在构建一个应用程序,我希望能够单击由DIV表示的矩形,然后使用键盘通过列出键盘事件来移动该DIV.
而不是在文档级别使用事件监听器来处理那些键盘事件,我可以在DIV级别监听键盘事件,也许是通过给予键盘焦点？
这是一个简化的示例来说明问题:
<html>
<head>
</head>
<body>
<div id="outer" style="background-color:#eeeeee;padding:10px">
outer
<div id="inner" style="background-color:#bbbbbb;width:50%;margin:10px;padding:10px;">
want to be able to focus this element and pick up keypresses
</div>
</div>
<script language="Javascript">
function onClick()
{
document.getElementById('inner').innerHTML="clicked";
document.getElementById('inner').focus();
}
//this handler is never called
function onKeypressDiv()
{
document.getElementById('inner').innerHTML="keypress on div";
}
function onKeypressDoc()
{
document.getElementById('inner').innerHTML="keypress on doc";
}
//install event handlers
document.getElementById('inner').addEventListener("click", onClick, false);
document.getElementById('inner').addEventListener("keypress", onKeypressDiv, false);
document.addEventListener("keypress", onKeypressDoc, false);
</script>
</body>
</html>
在单击内部DIV时,我尝试给它焦点,但随后的键盘事件总是在文档级别而不是我的DIV级别事件侦听器中被选中.
我是否只需要实现特定于应用程序的键盘焦点概念？
我应该补充一下,我只需要在Firefox中使用它.
我有以下代码片段:
<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...
我有一个<div>动态构建元素的页面(如上所述).这<div>会在主屏幕顶部显示数据.当页面生成div时,我想设置焦点.我不能在body标签上放一个onLoad函数,因为我不知道什么时候生成div.
一个<div>标签不能有焦点设置于它直接.所以我<a>在下面的函数中放了一个带有id 的空标签:
function setTableFocus(count){
var flinkText = 'focusLink'+count;
document.getElementById(flinkText).focus();
}
我没有收到任何错误,我知道在页面显示时(通过警报)正在调用该函数.但是,当我使用箭头键或输入按钮时整个页面移动(甚至不是呈现数据的div).
当我点击其中一个表格元素(使用鼠标).之后,keydown事件开始工作.我想要做的是将数据呈现给用户并自动进行键盘驱动.
有没有人有任何建议我怎么能做到这一点？
我在html页面中有以下代码:
<img id="image_java" alt="image_not" src="images/java-icon.png">
在css页面中的代码如下:
#image_java: focus {
outline: 2px solid blue;
}
我也尝试过:
img:focus{
outline: 2px solid blue;
}
但是它们似乎不起作用,它们假设在焦点时在图像周围显示蓝色边缘.有谁知道这是怎么做到的吗？谢谢!!!
是否有一种默认方式可以在任何时候在焦点元素上按下 enter 时触发点击事件？
我所指的是在专注于 a 时<button>按 Enter 与在专注于 a<div> <li> <span>等时按 Enter 的区别。<button>按键enter按预期触发。但是，<div>按键enter没有任何作用。我相信您必须专门为该按键编写事件。
$('li').click(function() {
//toggles something
});
$("li").keydown(function(e){
if(e.which === 13){
$(this).click();
}
});
我有以下要求：
在我的网页上有用于导航的锚链接（像skip to content等）。这些锚点应该将目标元素带入视野并聚焦它。（焦点很重要，因为否则屏幕阅读器无法正确定位。到目前为止，我的代码如下所示：
<a href="#content" class="navbtn">Skip to content</a>
<!-- somewhere else...-->
<div id="content" tabindex="-1">
Lorem ipsum...
</div>
<script>
$(".navbtn").click(function(e) {
e.preventDefault();
$("#content").focus();
});
</script>
请注意，我知道这是硬编码的，将来我会更改它，但出于测试目的，我将其留在这里。
好的，这有什么作用呢？ 在这篇文章中 ，上面的方法被称为聚焦 div 元素。视觉上我无法判断，但我的屏幕阅读器不会移动到元素（我在 iPhone 上的 Safari 中使用 VoiceOver）。如果目标是按钮、链接或任何其他默认具有 tabindex 的元素，则它可以正常工作。
有任何想法吗？
编辑：按左模式键时，我让它与盲文显示器一起工作。我通常使用正确的模式键向手机发送双击事件，但正确的不起作用。然而，左边的人确实如此。我不知道为什么，说实话。在屏幕上双击仍然不起作用...无论哪种方式，都不需要 JavaScript。
im trying to use a ref for focusing on the element when onBlur. I'm using react v.16.9.0 My code is this:
const handleKeyDown = (e, element, index) => {
element.current.focus();
event.preventDefault();
};
const pinDigitBuilder = () => {
const arr = Array(...Array(TOTAL_PIN_DIGITS));
return arr.map((x, i) => {
const inputRef = useRef(null);
console.log(inputRef);
return (
<Field
key={`${PIN_DIGIT}${i + 1}`}
id={`${PIN_DIGIT}${i + 1}`}
name={`${PIN_DIGIT}${i + 1}`}
ref={inputRef}
component={InputTextField}
className="text xxs2"
classNameInvalid="text xxs2 error"
type="text"
divClassName="fieldWrap"
maxLength={1}
normalize={keepNumbersOnly}
errorStyle={{ display: 'none' }}
autoComplete="off" …请不要向我扔石头,因为我是js和jquery的新手.是否有可能专注于div？我只是想在点击div时处理事件,或者当我们点击div之外时处理事件.像这样的东西:
HTML:
<div id="focusedDiv"></div>
JS:
$("#focusedDiv").focus(function () {
....
});
$("#focusedDiv").focusout(function () {
....
});
提前致谢!
嗨我想在页面加载后立即关注div.它在Firefox上运行得很完美,但在Chrome上却没有,它不起作用.这是我的代码:
https://jsfiddle.net/9yb2boxn/
document.getElementById("focusme").focus();#focusme {width:400px; height:100px; overflow-y:scroll; }<div id="focusme">
focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me focus me
</div>在Firefox中,当我运行此代码并按下键盘上的向下箭头时,div向下滚动.但不是铬.为什么会出现这个问题？
我已经试过了
setTimeout(function() {
document.getElementById("focusme").focus(); …