如何获得闪烁的光标而不是选择

Question

$('.inptitle').dblclick(function(e){
 e.preventDefault();
 $(this).attr('readonly', false).focus();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='inptitle' value = 'TITLE' readonly = true>

删除 readonly 后，我需要在输入内容的末尾有一个闪烁的光标，而不是选择。

有什么帮助吗？

Answer 1

在浏览器有时间处理只读更改和该焦点的其他更改后，您需要将焦点移开并放回去。这将解决闪烁问题。

要空选，您可以简单地更改文本并立即放回原来的内容。

这是它的样子：

$('.inptitle').dblclick(function(e){
    e.preventDefault();
    var val = $(this).val();
    $(this).attr('readonly', false).blur();
    setTimeout(function () { 
        $('.inptitle').focus().val(val+" ").val(val);
    }, 10);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' class='inptitle' value = 'TITLE' readonly = true>

观察

我不建议更改默认行为：当您双击文本时，标准行为是选择您单击的单词。改变这种行为会让用户感到惊讶并打破他们的直觉。