突出显示 textarea 中的所有文本

Posted 2023-05-07

【中文标题】突出显示 textarea 中的所有文本

【英文标题】：highlight all text in textarea

【发布时间】：2011-11-10 22:38:36

【问题描述】：

当用户单击文本区域时，我想选择文本区域内的所有文本。我试过onclick="this.focus()"，但这并没有做任何事情。我试过onclick="this.highlight()"，但这导致了一个错误。我该怎么办？

【问题讨论】：

[2020] 现代浏览器有setSelectionRangedeveloper.mozilla.org/en-US/docs/Web/API/htmlInputElement/…

【参考方案1】：

这可能会惹恼您的用户，因为它会阻止将插入符号放置在用户单击的位置这一有用的默认行为，因此我一般建议不要这样做。也就是说，大多数浏览器的解决方案是onclick="this.select()"。

但是，这在 Chrome 中不起作用[2014 年 2 月更新：它现在似乎在最新版本的 Chrome 中起作用]。有关此问题的解决方法和一般背景，请参阅以下问题：jQuery - select all text from a textarea

【讨论】：

onclick="this.focus();this.select()" 在 Chrome 中也可以正常工作

@mars-o：确实如此。我想知道 Chrome 是否改变了它的行为，或者我是否总是错的。

在 Chrome 28 上，onclick="this.select()" 就足够了！

onfocus="this.select()" 在使用 TAB 键时效果更好，并且还允许用户轻松控制他们想要放置插入符号的位置。

@A.Genedy：我同意。这个问题只提到了点击。

【参考方案2】：

onclick="this.focus();this.select()" readonly="readonly"

【参考方案3】：

<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');" style="width:200px" >This text you can select all by clicking here </textarea>

我得到了这个代码here

【讨论】：

document.getElementById(id) 可以省略，只需将this 作为参数传递：function SelectAll(el) el.focus(); el.select(); ;

【参考方案4】：

onclick="this.focus()" 是多余的，因为focus() 方法与单击文本区域相同（但它将光标放在文本的末尾）。

highlight() 甚至不是一个函数，当然除非你在其他地方创建了它。

结论：做this.select()

【参考方案5】：

支持setSelectionRange()的浏览器似乎比支持select()的浏览器多

一种方式：- 使用setSelectionRange()

https://caniuse.com/#search=setSelectionRange

const my_textarea = document.getElementById("my_textarea");

document.getElementById("my_but").onclick = function () 
        
    	if(my_textarea.value !== "")
    		

		    my_textarea.onfocus = function () 
		        my_textarea.setSelectionRange(0, my_textarea.value.length);
                my_textarea.onfocus = undefined;
		     
		    my_textarea.focus();   		
    		
    		

    

<textarea id="my_textarea" name="text">1234567</textarea>
<br>
<button id="my_but">Select</button>

2 方式：- 使用select()

https://caniuse.com/#search=select

const my_textarea = document.getElementById("my_textarea");

document.getElementById("my_but").onclick = function () 
        
    	if(my_textarea.value !== "")
    		

		    my_textarea.onfocus = function () 
		        my_textarea.select();
                my_textarea.onfocus = undefined;
		     
		    my_textarea.focus();   		
    		
    		

    

<textarea id="my_textarea" name="text">1234567</textarea>
<br>
<button id="my_but">Select</button>

【参考方案6】：

您必须使用 .focus() 以及 .select() Javascript 函数来获得所需的结果。

查看以下链接以获取示例：

http://www.plus2net.com/javascript_tutorial/textarea-onclick.php

【参考方案7】：

要完成其他答案，也许您想复制您刚刚单击的代码/文本，因此请使用：

onclick="this.focus();this.select();document.execCommand('copy')"

【讨论】：

正是我想要的。节省了我的时间，谢谢。 :)

【参考方案8】：

const elem = document.elementFromPoint(clientX, clientY)
if (elem.select)  // Make sure the method exists.
  elem.focus()
  elem.select()

您可能不想花时间寻找您的对象。

例如，您已将inject scripts 的扩展写入网页。

此时不需要考虑可以立即申请的元素ID。

示例

<textarea rows="3" style="width:200px">"Double click" or Press "F4" to select all text</textarea>
<script>

  let clientX, clientY
  document.addEventListener("mousemove", (e) => 
    clientX = e.clientX
    clientY = e.clientY
  )

  selectAllFunc = () => 
    const elem = document.elementFromPoint(clientX, clientY)
    if (elem.select)  // Make sure the method exists.
      elem.focus()
      elem.select()
    
  

  document.addEventListener("keydown", (keyboardEvent) => 
    if (keyboardEvent.key === "F4")  // && keyboardEvent.ctrlKey
      selectAllFunc()
    
  )

  document.addEventListener("dblclick", (e) => 
      selectAllFunc()
  )
</script>