2013-07-22 14 views
24

Tak, obecnie mam pole wprowadzania tekstu z wartością, która jest również autofocused.umieść kursor na końcu wartości wpisu tekstowego

Podczas ładowania strony wartość jest zaznaczana/podświetlana. Czy istnieje sposób, aby umieścić kursor na końcu tekstu wartości zamiast podświetlania go w javascript lub CSS?

Oto skrzypce js gdzie jest podświetlona wartość w autofocused tekstu na stronie: http://jsfiddle.net/TaGL5/

Oto kod HTML: <input type="text" value="value text" autofocus />

+2

onfocus = "this.value = this.value;" –

+0

onfocus "this.value = this.value" przydzieli istniejącą wartość do pola tekstowego, to tak jakbyś wpisał ten tekst, a więc masz kursor na końcu. – VishalDevgire

+1

możliwy duplikat [Użyj JavaScript, aby umieścić kursor na końcu tekstu w elemencie wprowadzania tekstu] (http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text- element wprowadzania tekstu) – Gary

Odpowiedz

45

To działa na mnie

<input type="text" autofocus value="value text" onfocus="this.value = this.value;"/>

+1

interesujące. Masz pomysł, dlaczego i jak to działa? –

+0

@Gary: Dzięki! –

+4

Po prostu zaktualizować, to albo nie działa już w FF, albo nigdy nie. W bieżącej wersji FF wybiera cały tekst, nie umieszcza kursora po. – vol7ron

5

Użyj Jquery do tego:

$(function() { 
 
     var input = $("#txt1"); 
 
    var len = input.val().length; 
 
    input[0].focus(); 
 
    input[0].setSelectionRange(len, len); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<input type="text" id="txt1" value="Lorem" style="width:400px;" />

Ale niektóre przeglądarki nie obsługują enter code here nieruchomości, w tym przypadku użyj:

$(document).ready(function(){ 
 
    $("#search").focus(function(){ 
 
     if (this.setSelectionRange) 
 
     { 
 
     var len = $(this).val().length; 
 
     this.setSelectionRange(len, len); 
 
     } 
 
     else 
 
     { 
 
     $(this).val($(this).val()); 
 
     } 
 
    
 
}); 
 

 
$("#search").focus(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 

 
<input id="search" type="text" value="mycurrtext" size="30" name="search" />

To pytanie już istnieje na stackoverflow:

Reference1

Reference2

+0

To trochę przesady w korzystaniu z biblioteki trzeciej strony dla tak łatwego zadania – shi

12

Upgrade do użytkownika @ Harsha odpowiedź: Okazało się, że aby praca rozwiązanie z Firefoksem, musimy tymczasową wartość reset „nie-równej wartości”, a następnie ustawić go z powrotem

<input type="text" autofocus value="value text" onfocus="var temp_value=this.value; this.value=''; this.value=temp_value" />

+0

Dobrze, ale jeśli idziesz aby użyć metody chenozaura, równie dobrze możesz go cytować: http: // stackoverflow.com/a/2345915/183181 – vol7ron

+3

@ vol7ron * "metoda kenozaura" *: D – yckart

0

Możesz dodać ten parametr do pola wprowadzania tekstu:

onmouseover="this.setSelectionRange(this.value.length,this.value.length);" 

NB: Działa dobrze pod Chromium w 2017

Powiązane problemy