Jak uzyskać tak efekt, że tekst w polu edycyjnym zaznacza się po kliknięciu na to pole?

Question

Często widzi się taki efekt na stronach - po kliknięciu na pole edycyjne jego zawartość od razu się podświetla, np. na YouTube gdy uzyskujemy link do filmu - gdy klikam w środku (jeden raz) to adres jest zaznaczony.

Zastanawiałem się jak można uzyskać taki efekt? W JavaScript, czy CSS?

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input value="Kliknij na mnie!" onclick="this.select()">

 

Krócej się chyba nie da :)

 

Answer 2

google pokazało taki szybki na to sposób: <

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>

 

Answer 3

Istnieje metoda służąca wykonaniu tej czynności własnie i zwie się ona select().

Składnia wygląda następująco:

1. wewnątrz znacznika HTML

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

2.  w skrypcie

   <input type="text" id="text-input" />
   	
   	<script>
   			document.getElementById("text-input").onclick = function() {
   				this.select();
   			}
   	</script>

    

Jeżeli chodzi o event, to możesz użyć zarówno onclick jak i onfocus, jednak pierwszy z wymienionych może wywoływać czasem nieporządane efekty.