焦点input框在加载

如何将光标聚焦在页面加载的特定input框?

也可以保留初始文本值,并将光标放在input的末尾?

<input type="text" size="25" id="myinputbox" class="input-text" name="input2" value = "initial text" /> 

有两个部分给你的问题。

1)如何集中页面加载input?

您可以将autofocus属性添加到input。

 <input id="myinputbox" type="text" autofocus> 

但是,这可能不支持所有的浏览器,所以我们可以使用JavaScript。

 window.onload = function() { var input = document.getElementById("myinputbox").focus(); } 

2)如何将光标放在input文本的末尾?

这里有一个非jQuery的解决scheme,其中有一些来自另一个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(); } 

下面是我如何用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> 

现在,您可以使用不带JavaScript的HTML5来支持HTML5的浏览器:

 <input type="text" autofocus> 

您可能希望从此开始并使用JavaScript构build它,以便为旧浏览器提供回退。

 $(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" />
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" /> 

这样做的便携方式是使用自定义函数(处理浏览器差异),就像这样 。

然后在<body>标签的末尾为onload设置一个处理程序,就像jessegavin所说:

 window.onload = function() { document.getElementById("myinputbox").focus(); } 

正常工作…

 window.onload = function() { var input = document.getElementById("myinputbox").focus(); } 

这对我来说很好:

 <form name="f" action="/search"> <input name="q" onfocus="fff=1" /> </form> 

fff将是一个全局variables,其名称是绝对不相关的,其目的是阻止generics负载事件,强调在这个input中的重点。

 <body onload="if(!this.fff)document.fqfocus();"> <!-- ... the rest of the page ... --> </body> 

来自: http : //webreflection.blogspot.com.br/2009/06/inputfocus-something-really-annoying.html

如果由于某种原因无法添加到BODY标签,则可以在该表单后添加该表单:

 <SCRIPT type="text/javascript"> document.yourFormName.yourFieldName.focus(); </SCRIPT>