如何在 TextBox 获得焦点时选中所有文本？

• 下载演示

引言

这是一个小技巧，但当你想要选中 TextBox 内部的所有文本时非常有用。

背景

这是我研究和测试过多种浏览器和设备的一个需求。下面分享问题和解决方案。

问题

当显示用户个人资料页面时，密码字段也会被填充。密码字段中的字符会被遮蔽（显示为星号或圆圈）。因此，典型的用户体验是在点击或聚焦到这些字段时选中所有文本，因为用户看不到密码，他/她肯定会更改整个密码。因此，问题是选中密码字段内的所有文本。

解决方案

我们将使用 jQuery 来完成这项任务。解决方案并不像看起来那么简单。所以，首先想到的是处理 focus 事件。是的，当然，我们将使用它。所以，代码如下…

$('#txtPassword').on('focus', function () {
    this.select();
});

但这并不是一个跨浏览器解决方案，并且会在 Safari 中失败。

那么，什么是跨浏览器？

实际上非常棘手。我们需要指定需要选择多少文本。我们可以使用 selectionStart 和 selectionEnd 属性来指定。

$('#txtPassword').on('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
});

现在，还有一件事。我们需要阻止 mouseup 事件，因为该事件在 focus 之后自动触发，这会导致取消选择所有文本。

$('#txtPassword').on('focus', function () {
    this.selectionStart = 0;
    this.selectionEnd = this.value.length;
});
$("#txtPassword").on('mouseup', function (e) {
    e.preventDefault();
});

完整演示

[演示] 在 TextBox 获得焦点时选中所有文本

如果您有任何疑问，请访问我的 博客 并给我发送 联系 Tadit Dash 请求。

CodeProject