如何取消通过.select()选中的只读input选中状态？已试.blur()无效

核心原因 #

只读input在部分浏览器中，blur()方法不会自动清除选中状态；另外navigator.clipboard.writeText()是异步操作，同步执行blur()可能在复制完成前就触发，导致选区未被正确清除。

可行解决方案 #

1. 异步回调中结合blur与手动清除选区

利用writeText()返回的Promise，在复制完成后同时执行blur()和手动清除全局选区，双重保险：

const $readonlyInput = $('input[readonly]');
const inputValue = $readonlyInput.val();

// 选中内容
$readonlyInput.select();
// 执行复制并在完成后取消选中
navigator.clipboard.writeText(inputValue)
  .then(() => {
    $readonlyInput.blur();
    // 手动清除全局选中范围
    window.getSelection().removeAllRanges();
  })
  .catch(err => {
    console.error('复制操作失败:', err);
  });

2. 直接手动清除全局选区（最简方案）

如果blur()对只读input完全无效，直接操作浏览器的选区对象是最可靠的方式：

const $readonlyInput = $('input[readonly]');

$readonlyInput.select();
navigator.clipboard.writeText($readonlyInput.val())
  .then(() => {
    window.getSelection().removeAllRanges();
  })
  .catch(err => {
    console.error('复制操作失败:', err);
  });

3. 临时移除readonly属性（备选方案）

针对部分对readonly元素行为限制严格的浏览器，可以临时移除readonly属性，执行blur()后再恢复：

const $readonlyInput = $('input[readonly]');
const inputValue = $readonlyInput.val();

// 临时移除readonly
$readonlyInput.removeAttr('readonly');
$readonlyInput.select();

navigator.clipboard.writeText(inputValue)
  .then(() => {
    $readonlyInput.blur();
    // 恢复readonly状态
    $readonlyInput.attr('readonly', true);
  })
  .catch(err => {
    console.error('复制操作失败:', err);
    // 即使复制失败也要恢复readonly
    $readonlyInput.attr('readonly', true);
  });

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