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

Posted 2023-05-07

【中文标题】如何在焦点上选择textarea中的所有文本（在safari中）

【英文标题】：how to select all text in textarea on focus (in safari)

【发布时间】：2011-09-06 06:35:26

【问题描述】：

我无法弄清楚为什么当文本区域获得焦点时我无法获取要选择的文本区域的内容。

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

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

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

【问题讨论】：

这听起来像是在有人试图编辑它时清除所有内容的秘诀……很痛苦。在大多数浏览器（和大多数其他应用程序）中，三次单击将选择文本区域的内容。我建议坚持标准的 UI 约定。

内容不应该被编辑，只是复制。

但是你说得有道理.. 但是，抛开这些不谈，我想了解一下 Safari 发生了什么以及这里的事件触发.. （请参阅我在 jsfiddle 页面上的注释)

就我而言，Flash 已经死了。 IMO，textarea 可以提供原始文本进行复制，而且肯定比使用 flash 更不邪恶。但是，我再次感谢您的意见，但请让我听取有关问题中所述实际问题的意见..

我知道这篇文章已经有一段时间了，但如果有人担心用户在尝试复制文本时会修改文本，您可以在 <textarea> 中添加 readonly 作为属性标记。

【参考方案1】：

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

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

代码：

$('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);
);

【讨论】：

但是 $this.unbind("mouseup");似乎没有必要，也许不是一个好主意。返回 false 就足够了。你为什么把它放进去？

@mikkelbreum：解除绑定部分是为了让mouseup 事件在文本区域被聚焦时正常触发。只有在 textarea 第一次获得焦点时才需要抑制它。诚然，如果焦点是通过键盘而不是第一个 mouseup 将被抑制，这并不理想，但在实践中不太可能成为问题。

$this = $(this); 创建一个名为 $this 的全局变量。使用 'var' 关键字来限制此变量的范围并防止引入全局变量：var $this = $(this);

@AndyFord：是的，我知道。错字。感谢您指出错误。

【参考方案2】：

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://***.com/questions/3150275/jquery-input-select-all-on-focus)
                $input.unbind('click').click ->
                    input = $(this).select();

                    setTimeout ->
                        input.select()
                    , 0

【参考方案3】：

这是唯一适用于 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" />

【参考方案4】：

似乎焦点事件干扰了选择方法。稍等片刻后调用它：

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

鉴于这只是为了应对，也许 textarea 应该是只读的。

【参考方案5】：

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

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

【参考方案6】：

我没有 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();
    );
);

编辑：在玩了一会儿之后，我使用了：

$(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;
    );
);

在本例中：http://jsfiddle.net/MarkSchultheiss/aSvst/23/