HTML中Tab切换表单域时如何将输入光标定位到默认文本末尾

你可以通过监听输入框的focus事件，手动覆盖浏览器默认全选文本的行为，将光标定位到指定位置，以下是可直接使用的实现方案：

原生JavaScript实现 #

方案1：通用定位到文本末尾 #

// 替换为你的Link输入域的DOM选择器
const linkInput = document.querySelector('#link-input');

linkInput.addEventListener('focus', function(e) {
  // 阻止浏览器默认的全选行为
  e.preventDefault();
  const textLength = this.value.length;
  // 将光标起始和结束位置都设置为文本末尾，避免选中内容
  this.setSelectionRange(textLength, textLength);
});

方案2：精确定位到等号=之后 #

如果你的输入框默认文本结构固定（如xxx=），可以直接定位到等号的下一个字符，更加精准：

const linkInput = document.querySelector('#link-input');

linkInput.addEventListener('focus', function(e) {
  e.preventDefault();
  // 查找等号在文本中的索引位置
  const equalSignIndex = this.value.indexOf('=');
  // 如果找不到等号则默认定位到末尾
  const targetPosition = equalSignIndex > -1 ? equalSignIndex + 1 : this.value.length;
  this.setSelectionRange(targetPosition, targetPosition);
});

框架场景适配 #

Vue写法 #

<!-- 模板部分 -->
<input 
  v-model="linkValue" 
  type="text"
  @focus="handleLinkFocus"
>

// 逻辑部分
methods: {
  handleLinkFocus(e) {
    const input = e.target;
    const equalIndex = input.value.indexOf('=');
    const targetPos = equalIndex > -1 ? equalIndex + 1 : input.value.length;
    input.setSelectionRange(targetPos, targetPos);
  }
}

React写法 #

function LinkInput() {
  const handleFocus = (e) => {
    const input = e.target;
    const equalIndex = input.value.indexOf('=');
    const targetPos = equalIndex > -1 ? equalIndex + 1 : input.value.length;
    input.setSelectionRange(targetPos, targetPos);
  };

  return <input type="text" defaultValue="link=" onFocus={handleFocus} />;
}

注意事项 #

• 上述方案对<input>和<textarea>元素均适用
• 如果需要兼容IE8及更低版本的旧浏览器，可以补充document.selection.createTextRange的兼容逻辑，目前主流浏览器无需额外兼容

内容的提问来源于stack exchange，提问作者Sunny Srivastava