突出显示textarea中的所有文本

时间:2011-09-06 00:12:56

标签: javascript

当用户点击textarea时,我想选择textarea中的所有文本。我试过了onclick="this.focus()",但这没有做任何事情。我试过了onclick="this.highlight()",但这导致了错误。我该怎么办?

7 个答案:

答案 0 :(得分:46)

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

但是,这不适用于Chrome [更新2014年2月:它现在似乎适用于最新版本的Chrome] 。有关此问题的变通方法和一般背景信息,请参阅以下问题:jQuery - select all text from a textarea

答案 1 :(得分:27)

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

答案 2 :(得分:13)

<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

答案 3 :(得分:5)

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

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

结论:做this.select()

答案 4 :(得分:2)

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

请查看以下链接以获取示例:

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

答案 5 :(得分:1)

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

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

答案 6 :(得分:1)

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

1种方式:-使用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>