javascript 如何在焦点上选择 textarea 中的所有文本（在 safari 中）

how to select all text in textarea on focus (in safari)

提问by mikkelbreum

I can't work out why I can't get the the content of a textarea to be selected when the textarea receives focus.

我不知道为什么当 textarea 获得焦点时我无法选择 textarea 的内容。

Please visit a live example here: http://jsfiddle.net/mikkelbreum/aSvst/1

请在此处访问现场示例：http: //jsfiddle.net/mikkelbreum/aSvst/1

Using jQuery, this is my code. (IN SAFARI) It makes the text selected in case of the click event, but not the focus event:

使用 jQuery，这是我的代码。（在 SAFARI 中）它在单击事件的情况下选择文本，而不是焦点事件：

$('textarea.automarkup')
.mouseup(function(e){
    // fixes safari/chrome problem
    e.preventDefault();
})
.focus(function(e){
    $(this).select();
})
.click(function(e){
    $(this).select();
});

回答by Tim Down

The simplest thing to do is to combine your existing code with a timer, since the focusevent is generally too early in WebKit:

最简单的做法是将您现有的代码与计时器结合起来，因为focus事件在 WebKit 中通常为时过早：

jsFiddle example: http://jsfiddle.net/NWaav/2/

jsFiddle 示例：http: //jsfiddle.net/NWaav/2/

Code:

代码：

$('textarea.automarkup').focus(function() {
    var $this = $(this);

    $this.select();

    window.setTimeout(function() {
        $this.select();
    }, 1);

    // Work around WebKit's little problem
    function mouseUpHandler() {
        // Prevent further mouseup intervention
        $this.off("mouseup", mouseUpHandler);
        return false;
    }

    $this.mouseup(mouseUpHandler);
});

回答by timmfin

Tim Down's answer got me close, but it still didn't work when clicking & dragging in Chrome, so I did this (Coffeescript).

Tim Down 的回答让我很接近，但是在 Chrome 中单击和拖动时它仍然不起作用，所以我这样做了（Coffeescript）。

$.fn.extend
    copyableInput: ->
        @.each ->
            $input = $(this)

            # Prevent the input from being edited (but allow it to be selected)
            $input.attr 'readonly', "readonly"

            if $input.is 'textarea'
                $input.unbind('focus').focus ->
                    input = $(this).select()
                    $input.data 'selected', true

                    setTimeout ->
                        input.select()
                    , 0

                # Work around WebKit's little problem
                $input.bind 'mousedown mouseup', (e) ->
                    $input.select()

                    if $input.data('selected') == true
                        e.preventDefault()
                        return false


                $input.unbind('blur').blur ->
                    $input.data 'selected', false

            else
                # Select all the text when focused (I'm intentionally using click for inputs: http://stackoverflow.com/questions/3150275/jquery-input-select-all-on-focus)
                $input.unbind('click').click ->
                    input = $(this).select();

                    setTimeout ->
                        input.select()
                    , 0

回答by Karl Laurentius Roos

This is the only thing that works in Safari. Focus won't work.

这是 Safari 中唯一有效的方法。对焦不行。

<script type="text/javascript">
function SelectAll(id)
{
    document.getElementById(id).focus();
    document.getElementById(id).select();
}
</script>

Textarea:<br>
<textarea rows="3" id="txtarea" onclick="SelectAll('txtarea');" onfocus="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </textarea>

Input TextBox:<br>
<input type="text" id="txtfld" onclick="SelectAll('txtfld');" style="width:200px" value = "This text you can select all" />

回答by carlwoodward

$("textarea").on("focus", function(event) {
  event.preventDefault();
  setTimeout(function() { $(event.target).select(); }, 1); 
});

http://jsfiddle.net/xCrN6/2/

http://jsfiddle.net/xCrN6/2/

回答by RobG

It seems that the focus event interferes with the select method. Call it after a short lag:

似乎焦点事件干扰了选择方法。短暂延迟后调用它：

<textarea id="ta0" onfocus="
  var inp=this;
  setTimeout(function(){inp.select();},10);
">Here is some text</textarea>

Given this is for coping only, perhaps the textarea should be readonly.

鉴于这仅用于应对，也许 textarea 应该是只读的。

回答by Mark Schultheiss

I don't have a Safari browser but I had the same issue with IE and using the following works there:

我没有 Safari 浏览器，但我在使用 IE 时遇到了同样的问题，并在那里使用了以下工作：

$(document).ready(function() {
    $('body').delegate('textarea.automarkup', 'focus', function(e) {
        var myText = $(this);
        var mytxt = myText.text();
        myText.text(mytxt + "\n event fired: " + e.type);
        myText.select();
    });
    $('body').delegate('textarea.automarkup', 'click', function(e) {
        var myText = $(this);
        var mytxt = myText.text();
        myText.text(mytxt + "\n event fired: " + e.type);
        myText.select();
    });
});

EDIT: After a bit more playing around I used:

编辑：经过更多的玩耍后，我使用了：

$(document).ready(function(e) {
        $(document).delegate('textarea.automarkup', 'focus click', function(e) {
        var myText = $(this);
        var mytxt = myText.text();
        //myText.text(mytxt + "\n event fired: " + e.type);
        myText.select();
        e.stopImmediatePropagation(); 
        $('#igot').text(mytxt+e.type);
        return false;
    });
});

in this example: http://jsfiddle.net/MarkSchultheiss/aSvst/23/

在这个例子中：http: //jsfiddle.net/MarkSchultheiss/aSvst/23/