28
4
How can the cursor be focus on a specific input box on page load?
如何在页面加载时将光标聚焦在特定输入框上？
Is it posible to retain initial text value as well and place cursor at end of input?
是否可以保留初始文本值并将光标放在输入的末尾？
个人中心
文章发布
退出<input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" />
There are two parts to your question.
你的问题有两个部分。
1) How to focus an input on page load?
1)如何将输入集中在页面加载上？
You can just add the autofocus attribute to the input.
只需将自动聚焦属性添加到输入即可。
<input id="myinputbox" type="text" autofocus>
However, this might not be supported in all browsers, so we can use javascript.
然而，并不是所有的浏览器都支持这一点，所以我们可以使用javascrip。
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
2) How to place cursor at the end of the input text?
2)如何将光标放在输入文本的末尾？
Here's a non-jQuery solution with some borrowed code from another SO answer.
下面是一个非jQuery解决方案，其中包含一些借用自另一个so答案的代码。
function placeCursorAtEnd() {
if (this.setSelectionRange) {
// Double the length because Opera is inconsistent about
// whether a carriage return is one character or two.
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
// This might work for browsers without setSelectionRange support.
this.value = this.value;
}
if (this.nodeName === "TEXTAREA") {
// This will scroll a textarea to the bottom if needed
this.scrollTop = 999999;
}
};
window.onload = function() {
var input = document.getElementById("myinputbox");
if (obj.addEventListener) {
obj.addEventListener("focus", placeCursorAtEnd, false);
} else if (obj.attachEvent) {
obj.attachEvent('onfocus', placeCursorAtEnd);
}
input.focus();
}
Here's an example of how I would accomplish this with jQuery.
以下是我将如何使用jQuery实现这一点的一个示例。
<input type="text" autofocus>
<script>
$(function() {
$("[autofocus]").on("focus", function() {
if (this.setSelectionRange) {
var len = this.value.length * 2;
this.setSelectionRange(len, len);
} else {
this.value = this.value;
}
this.scrollTop = 999999;
}).focus();
});
</script>
Just a heads up - you can now do this with HTML5 without JavaScript for browsers that support it:
提醒一下--您现在可以在支持HTML5的浏览器上使用HTML5实现这一点，而无需使用Java脚本：
<input type="text" autofocus>
You probably want to start with this and build onto it with JavaScript to provide a fallback for older browsers.
您可能希望从这一点开始，并使用JavaScript构建它，以便为较旧的浏览器提供后备。
$(document).ready(function() {
$('#id').focus();
});
function focusOnMyInputBox(){
document.getElementById("myinputbox").focus();
}
<body onLoad="focusOnMyInputBox();">
<input type="text" size="25" id="myinputbox" class="input-text" name="input2" onfocus="this.value = this.value;" value = "initial text">
A portable way of doing this is using a custom function (to handle browser differences) like this one.
实现这一点的一种可移植方法是使用如下所示的定制函数(以处理浏览器差异)。
Then setup a handler for the onload at the end of your <body> tag, as jessegavin wrote:
然后在标记的末尾为onLoad设置一个处理程序，如jesSegavin所写：
window.onload = function() {
document.getElementById("myinputbox").focus();
}
very simple one line solution:
非常简单的一行解决方案：
<body onLoad="document.getElementById('myinputbox').focus();">
Working fine...
工作很好..。
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
Try:
尝试：
Javascript Pure:
纯Java脚本：
[elem][n].style.visibility='visible';
[elem][n].focus();
Jquery:
JQuery：
[elem].filter(':visible').focus();
This is what works fine for me:
这就是对我来说很好的方法：
<form name="f" action="/search">
<input name="q" onfocus="fff=1" />
</form>
fff will be a global variable which name is absolutely irrelevant and which aim will be to stop the generic onload event to force focus in that input.
Fff将是一个全局变量，其名称完全无关，其目的将是停止通用onLoad事件以强制在该输入中聚焦。
<body onload="if(!this.fff)document.f.q.focus();">
<!-- ... the rest of the page ... -->
</body>
From: http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html
出发地：http://webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html
If you can't add to the BODY tag for some reason, you can add this AFTER the Form:
如果由于某些原因不能添加到Body标记，可以在表单后添加以下内容：
<SCRIPT type="text/javascript">
document.yourFormName.yourFieldName.focus();
</SCRIPT>
Add this to the top of your js
将此添加到js的顶部
var input = $('#myinputbox');
input.focus();
Or to html
或设置为html
<script>
var input = $('#myinputbox');
input.focus();
</script>
Just do it!
就这么做!
window.onload = function() {
setTimeout(function () {
document.getElementById("input-box-id").focus();
document.getElementById("input-box-id").click();
}, 1000);
}
The first code block suggested actually places the cursor at the end of the existing value as well, it works good. I apreciate your help.
建议的第一个代码块实际上也将光标放在现有值的末尾，效果很好。我非常感谢你的帮助。
The Javascript version is very good, works flawless for iframe with autofocus issues. Also lightweight and compact. +1 as it helped me.
JavaScript版本非常好，对于具有自动聚焦问题的iframe来说完美无瑕。同样轻巧紧凑。+1因为它帮助了我。
Nice to know that, does this already moves the cursor to the last position in the input field?
很高兴知道这一点，这是否已经将光标移动到输入字段的最后位置？
I don't think that @Codex73 is trying to accomplish what the placeholder attribute in HTML5 does. It sounds like he wants the cursor to be automatically positioned at the end of whatever value is currently in the input.
我不认为@Codex73试图完成HTML5中的占位符属性所做的事情。听起来他想让光标自动定位在当前输入的任何值的末尾。
You're right, this isn't a complete solution. But this does solve a couple of things (onload autofocus and placeholder text).
你说得对，这不是一个完整的解决方案。但这确实解决了一些问题(加载自动对焦和占位符文本)。
Note that as of 1/2019, Safari on iOS does not support this: caniuse.com/#feat=autofocus
请注意，从2019年1月1日起，iOS上的Safari不支持此功能：caniuse.com/#feat=AutoFocus
This requires jQuery.
这需要jQuery。
Yeah you need to include jQuery libs :)
是的，您需要包括jQuery库：)
classic stackoverflow :)
经典堆栈溢出：)
28
4
0
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
我一直在尝试使用 Bootstrap 的表单样式处理 AngularJS 的电子邮件验证，并遇到了这个 CSS block 。 input:focus:required:invalid, textar
我在 bootstrap 中查看 dropdown.js 的历史，并在 git 上发现了以下更改历史文件，here : $this.focus() // focus() being changed
在不考虑性能的情况下，我总是认为 $(":focus") 返回的 jquery 对象等同于 $(document.activeElement)。 但是，如果您闯入浏览器调试器并评估 $(":focus
我使用 datatables from fluent kit和分页，当点击时(:active)突出显示: box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); 我
我的目标是在单击 span(带有 Show Me 文本)时显示带有 show 类的 p 标签。我曾尝试使用 :focus 伪选择器来执行此操作，但使用此方法使得 p 标记仅在单击其他位置之前显示，其中
result 我想让图片保持点击状态。 我为每个图标使用了两个图像。一个是什么时候没有被点击。另一个是何时单击。悬停工作正常。但焦点根本不起作用。 我没有看到任何错误或错误。请帮帮我! 这是 body
我在表格布局中嵌套了编辑文本，然后在 ScrollView 中嵌套了表格布局，触摸模式下的可聚焦/可聚焦在真实设备中不起作用，但令人惊讶的是它在模拟器中起作用。 请问能否提供一些替代解决方案？ 最佳答
我使用 Backbone.js 的代码的 View 部分是这样的: var myView = Backbone.View.extend({ events: { 'focus .
我有一个行为类似于选项卡控件的用户控件。选项卡标题是 UserControl 实例，它们重写 Paint 事件以使它们看起来是自定义的。 为了利用选项卡页上各种控件上的验证事件，当用户单击选项卡标题时
我遇到了一个麻烦的网页，其结构很复杂。如果用鼠标单击一个DIV，则一切正常。但是，如果它是通过 javascript 获得焦点的(即 divElement.focus)。布局变得凌乱。这只发生在 IE
这是一个代码笔来演示我所看到的: https://codepen.io/anon/pen/zMvxPy HTML: JS: $('input').on('focus', () => { cons
问题: PrimeFaces“p:focus”标签不是聚焦。 - 即，当 xhtml 页面呈现给用户时，没有输入字段处于焦点。 问题: 为什么不呢？如何让“p:focus”在这个简单的应用程序中正常工
我有一个 只有当第一个子元素获得焦点而不是第二个子元素时，我才想在其中设置焦点的元素。我尝试使用 :not伪类，但没有成功。 值得注意的是，我仍然需要关注第二个元素，只是不想有两个焦点元素(父 + 子
我正在尝试用纯 CSS 创建一个可访问的下拉菜单，但我不太确定该怎么做。 如果 anchor 处于事件状态，我可以获得下一个 UL(子菜单)，但是一旦进入子菜单，聚焦第一个链接，我不确定如何告诉 an
我在 jQuery UI 代码库中看到 .focus(1)，但我无法弄清楚该参数的用途。 它与.focus()有何不同？我阅读了 jQuery 网站上的 .focus 文档，但仍然一无所知。 谢谢。
在 WPF 中，有两种方法可以将焦点设置到元素上。 您可以调用 input 元素的 .Focus() 方法，也可以使用 input 元素作为参数调用 Keyboard.Focus() 。 // fir
我有一个可以获得焦点的父组件。它使用这个焦点来提供键盘控制。该父组件可以生成一个子组件，该子组件同样可以获取焦点，以便它可以响应键盘事件。子组件监听的键盘事件之一是 这会导致子组件被卸载。 当子组件卸
我有一个可以获得焦点的父组件。它使用这个焦点来提供键盘控制。该父组件可以生成一个子组件，该子组件同样可以获取焦点，以便它可以响应键盘事件。子组件监听的键盘事件之一是 这会导致子组件被卸载。 当子组件卸
我试图突出焦点 秒。 我添加了 -1 的标签索引给他们每个人，并确认调用some_tr.focus()套document.activeElement那个some_tr .然而，由于某种原因some_t
我是一名优秀的程序员,十分优秀！