Javascript 使用 jQuery 突出显示(选择)文本框中的所有文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3005227/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:51:47  来源:igfitidea点击:

Using jQuery to Highlight (Select) All Text in a Textbox

javascriptjqueryhtml

提问by Spyros

I have an input text box with some text in it , onclick event I want to run a javascript function to select (highlight) all text that is in this box , how I can do that with jquery?

我有一个输入文本框,里面有一些文本,onclick 事件我想运行一个 javascript 函数来选择(突出显示)这个框中的所有文本,我怎么能用 jquery 做到这一点?

回答by Tim Down

No need for jQuery, this is simple with the DOM and works in all mainstream browsers:

不需要 jQuery,这对 DOM 来说很简单,并且适用于所有主流浏览器:

input.onfocus = function() { this.select(); };

If you must do it with jQuery, there's very little difference:

如果你必须用 jQuery 来做,那几乎没有区别:

$(input).focus(function() { this.select(); });

回答by Darin Dimitrov

You may take a look at this article:

你可以看看这篇文章

Let's assume that we have the following text input:

<input type="text" id="txtInput" />

In most cases, we would want to have this feature available to all textboxes across our website, so we would create a function to handle this, and call it as needed. Calling this function with the expected argument will make execute the highlighting of the text.

function selectAllText(textbox) {
textbox.focus();
textbox.select(); }

Assuming you are developing against DotNetNuke 5, or have jQuery already imported into your website, add the following jQuery to your site for each textbox. (If you have a lot of textboxes, we could do this differently, but that's for a different post.)

jQuery('#txtInput').click(function() { selectAllText(jQuery(this)) });

假设我们有以下文本输入:

<input type="text" id="txtInput" />

在大多数情况下,我们希望此功能可用于我们网站上的所有文本框,因此我们将创建一个函数来处理此问题,并根据需要调用它。使用预期参数调用此函数将执行文本的突出显示。

function selectAllText(textbox) {
textbox.focus();
textbox.select(); }

假设您正在针对 DotNetNuke 5 进行开发,或者已经将 jQuery 导入您的网站,请将以下 jQuery 添加到您的网站的每个文本框。(如果你有很多文本框,我们可以用不同的方式来做,但那是针对不同的帖子。)

jQuery('#txtInput').click(function() { selectAllText(jQuery(this)) });

回答by gnarf

You can do this:

你可以这样做:

$('input').click(function() {
 // the select() function on the DOM element will do what you want
 this.select();
});

Of course, then you can't click on the element to select an arbitrary point in the input, so it might be better to fire that event on focusinstead of click

当然,那么你不能点击元素来选择输入中的任意点,所以最好触发该事件focus而不是click

Quick Demo w/ clickor w/ focus

带点击带焦点的快速演示

回答by Sunny Sharma

this works best for me.

这对我最有效。

$('myTextbox').select();

回答by Mac

Where I typically do this is in

我通常这样做的地方是

$(document).ready(function () {
    $('#myTextBox').focus();
    $('#myTextBox').select();
}

for the first textbox that I want filled in. That way if I'm preserving state; and if the user backtracks to the page then it automatically highlights it all for typeover.

对于我想要填充的第一个文本框。如果我要保留状态,就这样;如果用户回溯到页面,那么它会自动突出显示所有内容以进行打字。

Useful technique for things like search boxes...

搜索框之类的有用技术...

回答by Travis Reeder

I know this isn't jquery, but for completeness of the answers to this question, you can use this on the text input itself:

我知道这不是 jquery,但为了完整回答这个问题,你可以在文本输入本身上使用它:

 onclick="this.select();"

For example:

例如:

<input type="text" value="abc" onclick="this.select();"/>