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|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|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|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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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