[英]Focus Input Box On Load
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. 您可以仅将
autofocus
属性添加到输入中。
<input id="myinputbox" type="text" autofocus>
However, this might not be supported in all browsers, so we can use javascript. 但是,并非所有浏览器都支持此功能,因此我们可以使用javascript。
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: 请注意-您现在可以在不支持JavaScript的HTML5上针对支持它的浏览器执行此操作:
<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: 然后,如jessegavin所写,在
<body>
标记的末尾为onload
设置一个处理程序:
window.onload = function() {
document.getElementById("myinputbox").focus();
}
Working fine... 工作正常...
window.onload = function() {
var input = document.getElementById("myinputbox").focus();
}
非常简单的一线解决方案:
<body onLoad="document.getElementById('myinputbox').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>
Try: 尝试:
Javascript Pure: Javascript Pure:
[elem][n].style.visibility='visible';
[elem][n].focus();
Jquery: jQuery:
[elem].filter(':visible').focus();
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.