html-input/textarea聚焦focus问题

起因

当用户首次进入页面，在input或textarea中已有内容的情况下，同时又需要修改内容的时候。我们想给用户更好的体验，那么就想到了在进入页面的时候将光标自动聚焦的文本上，减少用户的操作并提示用户需要输入内容。

问题

但是在使用时有一点小bug，那就是光标闪烁的位置并不在末尾，而是在开头：

原始代码：


  
  我不快乐

input:

textarea:

这样的效果当然不是我们想要的

解决方案

省流：该方法的两个参数均为-1即可：input.setSelectionRange(-1, -1)

当然也有相应的解决方法，那就是setSelectionRange方法

HTMLInputElement.setSelectionRange 方法用于设定或 </code>元素中当前选中文本的起始和结束位置。</p> <h3 id="语法elementsetselectionrangeselectionstart-selectionend--selectiondirection">语法：element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);</h3> <h3 id="参数">参数</h3> <p>如果 <code>selectionEnd</code> 小于 <code>selectionStart</code>，则二者都会被看作 <code>selectionEnd</code>。</p> <ul> <li> <p><code>selectionStart</code></p> <p>被选中的第一个字符的位置索引，从0开始。如果这个值比元素的 <code>value</code> 长度还大，则会被看作 <code>value</code> 最后一个位置的索引。</p> </li> <li> <p><code>selectionEnd</code></p> <p>被选中的最后一个字符的 <em>下一个</em> 位置索引。如果这个值比元素的value长度还大，则会被看作value最后一个位置的索引。</p> </li> <li> <p><code>selectionDirection</code> 可选</p> <p>一个表示选择方向的字符串，可能的值有：</p> </li> <li> <p><code>"forward"</code></p> </li> <li> <p><code>"backward"</code></p> </li> <li> <p><code>"none"</code> 默认值，表示方向未知或不相关。</p> </li> </ul> <h3 id="修改后的代码">修改后的代码</h3> <pre><code class="language-html"><body> <input type="text" value="你快乐吗" /> <textarea cols="10" rows="3">我不快乐

input

textarea

成功解决了文本框聚焦的需求

html

html-input/textarea聚焦focus问题

起因

问题

解决方案

相关

html标签

HTML和CSS

HTML表单

HTML5新增

Jmeter+ant实现自动生成基于HTML报告及自动发送邮件

Python 发送HTML格式的邮件

shell 拼接html table 发送邮件

html入门-狂神学java

SAP导出报表格式XXl、XML、XLSX、MHTML选择

HTML5手机APP开发入门(2)

https://m.php.cn/vuejs/464077.html

HTML+CSS系列:登录界面实现

标签