如何集中输入，并取消选择其中的文本

How to focus input, and deselect text inside it

本文关键字：选择 取消 文本 何集中 集中 输入      更新时间：2023-09-26

我目前想要聚焦第一个输入元素，而不选择输入元素内的预设值文本。如何集中输入元素，然后取消选择其中的文本？我目前关注的jQuery如下。

$(document).ready(function() {
    $("input[name='title']").focus();
});

您可以使用selectionStart和selectionEnd属性：

$(document).ready(function() {
    $("input[name='title']").each(function(){
        this.focus();
        this.selectionEnd = this.selectionStart;
    });
});

$(document).ready(function() {
    $("input[name='title']").focus();
    $("input[name='title']").val($("input[name='title']").val());
});

这是基于Danilo Valente上面的回答。我发现在Chrome上，在调用this.selectionEnd = this.selectionStart之前，我必须使用一个微小的延迟，否则输入文本将保持选中状态：

这适用于Chrome、Firefox、Safari和IE（已测试的IE 10）

$("input").focus(function() {
    var input = this;
    setTimeout(function() { input.selectionStart = input.selectionEnd; }, 1);
});

下面是一个演示：http://jsfiddle.net/rangfu/300ah0ax/2/

$("input[name='title']").focus(function()
{ 
    var elem = $(this);
    elem.val(elem.val());
});

希望添加一些增强的解决方案，该解决方案还关心取消选择时的实际插入符号定位。

我使用了以下input元素方法：

<input (blur)="onLocalFocusOut()" (click)="onInputClick($event)" (mousedown)="onMouseDown($event)" />

方法如下：

public onInputClick(event: MouseEvent): void {
    if (!this._initialSelectAll) {
        (event.target as HTMLInputElement).select();
        this._initialSelectAll = true;
    }
}
public onMouseDown(event: MouseEvent): void {
    if (this._initialSelectAll) {
        (event.target as HTMLInputElement).selectionStart = (event.target as HTMLInputElement).selectionEnd = 0;
    }
}
public onLocalFocusOut(): void {
    this._initialSelectAll = false;
    this.onFocusChange(false);
}

这样的设置确保对于input元素内的每个第一click，将选择所有字段内容。任何后续的click都将清除选择，并将插入符号定位在实际的鼠标单击坐标处。每当input元素将失去焦点时，该逻辑将被重新初始化。

html和code是为angular 2+编写的，但将其适应任何其他编码框架都很简单。

它的不briliant购买可能会帮助您

JSFiddle

基本：覆盖已经存在的内容。。。

$(document).ready(function() {
    $('#t1').focus();
    $('#t1').val($('#t1').val());                      
}); ​
相关文章：