blocks|key|1714035|text|来自http://www.codeave.com/javascript/code.asp?u_log=7004|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1714036|​|1714037|var+input+=+document.getElementById('myTextInput');
input.focus();
input.select();|code-block|syntax|javascript|1714038|<input+id="myTextInput"+value="Hello+world!"+/>|1714039|1714040|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codeave.com/javascript/code.asp?u_log=7004^0|2|1H|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>From <a href="http://www.codeave.com/javascript/code.asp?u_log=7004" rel="noreferrer">http://www.codeave.com/javascript/code.asp?u_log=7004</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var input = document.getElementById('myTextInput');
input.focus();
input.select();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="myTextInput" value="Hello world!" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1499063|text|在您的input标签中，放置以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1499064|onFocus="this.select()"|code-block|syntax|javascript|1499065|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In your input tag, place the following:</p>

<pre><code>onFocus="this.select()"
</code></pre>


blocks|key|1499030|text|要在页面加载时执行此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1499031|​|1499032|window.onload+=+function+()+{
++var+input+=+document.getElementById('myTextInput');
++input.focus();
++input.select();
}|code-block|syntax|javascript|1499033|<input+id="myTextInput"+value="Hello+world!"+/>|1499034|1499035|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>To do it on page load:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>window.onload = function () {
  var input = document.getElementById('myTextInput');
  input.focus();
  input.select();
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="myTextInput" value="Hello world!" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1714102|text|我发现了一个非常简单的方法，效果很好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1714103|<input+type="text"+onclick="this.focus();this.select()">|code-block|syntax|javascript|1714104|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found a very simple method that works well:</p>

<pre><code>&lt;input type="text" onclick="this.focus();this.select()"&gt;
</code></pre>


blocks|key|1714136|text|在使用jquery时...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1714137|html：|1714138|<input+type='text'+value='hello+world'+id='hello-world-input'>|code-block|syntax|javascript|1714139|jquery：|1714140|$(function()+{
++$('#hello-world-input').focus().select();
});|1714141|示例：https://jsfiddle.net/seanmcmills/xmh4e0d4/|offset|length|1714142|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/seanmcmills/xmh4e0d4/^0|0|0|0|0|0|3|16|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>when using jquery...</p>

<p>html:</p>

<pre><code>&lt;input type='text' value='hello world' id='hello-world-input'&gt;
</code></pre>

<p>jquery:</p>

<pre><code>$(function() {
  $('#hello-world-input').focus().select();
});
</code></pre>

<p>example: <a href="https://jsfiddle.net/seanmcmills/xmh4e0d4/" rel="nofollow">https://jsfiddle.net/seanmcmills/xmh4e0d4/</a></p>


blocks|key|1714182|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1714183|++++var+input+=+document.getElementById('myTextInput');
++++input.focus();
++++input.setSelectionRange(+6,++19+);|code-block|syntax|javascript|1714184|++++<input+id="myTextInput"+value="Hello+default+value+world!"+/>|1714185|1714186|选择文本字段中的特定文本|1714187|您还可以使用like|1714188|input.selectionStart+=+6;
input.selectionEnd+=+19;|1714189|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    var input = document.getElementById('myTextInput');
    input.focus();
    input.setSelectionRange( 6,  19 );</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;input id="myTextInput" value="Hello default value world!" /&gt;</code></pre>
</div>
</div>
</p>

<p>select particular text on textfield</p>

<p>Also you can use like</p>

<pre><code>input.selectionStart = 6;
input.selectionEnd = 19;
</code></pre>


blocks|key|1499216|text|使用autofocus属性可以很好地处理文本输入和复选框。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1499217|<input+type="text"+name="foo"+value="boo"+autofocus="autofocus">+FooBoo
<input+type="checkbox"+name="foo"+value="boo"+autofocus="autofocus">+FooBoo|code-block|syntax|javascript|1499218|entityMap^0|2|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Using the <code>autofocus</code> attribute works well with text input and checkboxes.</p>

<pre><code>&lt;input type="text" name="foo" value="boo" autofocus="autofocus"&gt; FooBoo
&lt;input type="checkbox" name="foo" value="boo" autofocus="autofocus"&gt; FooBoo
</code></pre>


blocks|key|1499278|text|让输入文本字段在页面加载时自动获得焦点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1499279|<form+action="/action_page.php">
++<input+type="text"+id="fname"+name="fname"+autofocus>
++<input+type="submit">
</form>|code-block|syntax|javascript|1499280|来源：https://www.w3schools.com/tags/att_input_autofocus.asp|offset|length|1499281|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/tags/att_input_autofocus.asp^0|0|0|3|1I|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Let the input text field automatically get focus when the page loads:</p>

<pre class="lang-html prettyprint-override"><code>&lt;form action="/action_page.php"&gt;
  &lt;input type="text" id="fname" name="fname" autofocus&gt;
  &lt;input type="submit"&gt;
&lt;/form&gt;
</code></pre>

<p>Source : <a href="https://www.w3schools.com/tags/att_input_autofocus.asp" rel="nofollow noreferrer">https://www.w3schools.com/tags/att_input_autofocus.asp</a></p>


blocks|key|1714362|text|在输入标记中使用自动聚焦，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1714363|<input+type="text"+autofocus>|code-block|syntax|javascript|1714364|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>In your input tag use autofocus like this</p>
<pre><code>&lt;input type=&quot;text&quot; autofocus&gt;
</code></pre>


<p>Upon page load I want to move the cursor to a particular field.  No problem.  But I also need to select and highlight the default value that is placed in that text field.</p>


how to auto select an input field and the text in it on page load

在页面加载时，我想将光标移动到特定的字段。没问题。但我还需要选择并突出显示该文本字段中的默认值。

问如何在页面加载时自动选择输入字段和其中的文本
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面加载时自动选择输入字段和其中的文本EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在页面加载时自动选择输入字段和其中的文本
EN