Zaznaczenie całego tekstu w tekście HTML po kliknięciu

Mam następujący kod do wyświetlenia pola tekstowego na stronie HTML.

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Po wyświetleniu strony tekst zawiera komunikat Wprowadź identyfikator użytkownika . Stwierdziłem jednak, że użytkownik musi kliknąć 3 razy, aby zaznaczyć cały tekst (w tym przypadku jest to proszę podać identyfikator użytkownika ).

Czy można zaznaczyć cały tekst za pomocą jednego kliknięcia?

Edytować:

Przepraszam, zapomniałem powiedzieć: muszę użyć danych wejściowych type="text"

Możesz użyć tego fragmentu javascript:

<input onClick="this.select();" value="Sample Text" />

Ale najwyraźniej nie działa na mobilnym Safari. W takich przypadkach możesz użyć:

<input onClick="this.setSelectionRange(0, this.value.length)" value="Sample Text" />

Wcześniej opublikowane rozwiązania mają dwa dziwactwa:

1. W Chrome wybór za pomocą .select () nie utrzymuje się - dodanie niewielkiego limitu czasu rozwiązuje ten problem.
2. Nie można umieścić kursora w żądanym punkcie po ustawieniu ostrości.

Oto kompletne rozwiązanie, które zaznacza cały tekst na fokusie, ale umożliwia wybranie określonego punktu kursora po fokusie.

        $(function () {
            var focusedElement;
            $(document).on('focus', 'input', function () {
                if (focusedElement == this) return; //already focused, return so user can now place cursor at specific point in input.
                focusedElement = this;
                setTimeout(function () { focusedElement.select(); }, 100); //select all text in any field on focus for easy re-entry. Delay sightly to allow focus to "stick" before selecting.
            });
        });

HTML (będziesz musiał umieścić atrybut onclick na każdym wejściu, dla którego ma działać na stronie)

 <input type="text" value="click the input to select" onclick="this.select();"/>

LUB LEPSZA OPCJA

jQuery (będzie działać dla każdego tekstu wprowadzanego na stronie, nie trzeba zmieniać HTML):

<script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>  
<script type="text/javascript">
    $(function(){
        $(document).on('click','input[type=text]',function(){ this.select(); });
    });
</script>

Wiem, że to stare, ale najlepszą opcją jest teraz użycie nowego placeholderatrybutu HTML, jeśli to możliwe:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Spowoduje to, że tekst będzie wyświetlany, chyba że zostanie wprowadzona wartość, co eliminuje potrzebę wybierania tekstu lub czyszczenia danych wejściowych.

Wymienione odpowiedzi są według mnie częściowe. Poniżej zamieściłem dwa przykłady tego, jak to zrobić w Angular i JQuery.

To rozwiązanie ma następujące funkcje:

• Działa dla wszystkich przeglądarek obsługujących JQuery, Safari, Chrome, IE, Firefox itp.
• Działa z Phonegap / Cordova: Android i IOs.
• Zaznacza wszystko tylko raz po wprowadzeniu ostrości do następnego rozmycia, a następnie ostrości
• Można użyć wielu wejść i nie powoduje to usterki.
• Dyrektywa Angular ma świetne możliwości ponownego użycia po prostu dodaj dyrektywę select-all-on-click
• JQuery można łatwo modyfikować

JQuery: http://plnkr.co/edit/VZ0o2FJQHTmOMfSPRqpH?p=preview

$("input").blur(function() {
  if ($(this).attr("data-selected-all")) {
  //Remove atribute to allow select all again on focus        
  $(this).removeAttr("data-selected-all");
  }
});

$("input").click(function() {
  if (!$(this).attr("data-selected-all")) {
    try {
      $(this).selectionStart = 0;
      $(this).selectionEnd = $(this).value.length + 1;
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    } catch (err) {
      $(this).select();
      //add atribute allowing normal selecting post focus
      $(this).attr("data-selected-all", true);
    }
  }
});

Angular: http://plnkr.co/edit/llcyAf?p=preview

var app = angular.module('app', []);
//add select-all-on-click to any input to use directive
app.directive('selectAllOnClick', [function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var hasSelectedAll = false;
      element.on('click', function($event) {
        if (!hasSelectedAll) {
          try {
            //IOs, Safari, thows exception on Chrome etc
            this.selectionStart = 0;
            this.selectionEnd = this.value.length + 1;
            hasSelectedAll = true;
          } catch (err) {
            //Non IOs option if not supported, e.g. Chrome
            this.select();
            hasSelectedAll = true;
          }
        }
      });
      //On blur reset hasSelectedAll to allow full select
      element.on('blur', function($event) {
        hasSelectedAll = false;
      });
    }
  };
}]);

Próbować:

onclick="this.select()"

Działa świetnie dla mnie.

Zawsze możesz używać document.execCommand( obsługiwane we wszystkich głównych przeglądarkach )

document.execCommand("selectall",null,false);

Zaznacza cały tekst w aktualnie zaznaczonym elemencie.

wejściowy autofokus ze zdarzeniem onfocus:

<INPUT onfocus="this.select()" TYPE="TEXT" NAME="thing" autofocus>

Umożliwia to otwarcie formularza z wybranym żądanym elementem. Działa przy użyciu autofokusa, aby trafić na wejście, które następnie wysyła sobie zdarzenie onfocus, które z kolei zaznacza tekst.

Uwaga: jeśli weźmiesz pod uwagę onclick="this.select()": Przy pierwszym kliknięciu zostaną wybrane wszystkie znaki, a następnie być może chcesz edytować coś na wejściu i ponownie kliknąć między znakami, ale spowoduje to ponowne zaznaczenie wszystkich znaków. Aby rozwiązać ten problem, powinieneś użyć onfocuszamiast onclick.

Rzeczywiście, używaj, onclick="this.select();"ale pamiętaj, aby nie łączyć z tym disabled="disabled"- nie zadziała wtedy i będziesz musiał ręcznie wybrać lub kliknąć kilka razy, aby wybrać, nadal. Jeśli chcesz zablokować wybraną wartość treści, połącz ją z atrybutem readonly.

Oto wersja odpowiedzi Shobana do wielokrotnego użytku:

<input type="text" id="userid" name="userid"
 value="Please enter the user ID" onfocus="Clear(this);"
/>

function Clear(elem)
{
elem.value='';
}

W ten sposób możesz ponownie użyć czystego skryptu dla wielu elementów.

Możesz wymienić

<input type="text" id="userid" name="userid" value="Please enter the user ID" />

Z:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Symbol zastępczy służy do zamiany wartości na sposób, w jaki chcesz, aby ludzie mogli pisać w polu tekstowym bez konieczności wielokrotnego klikania lub używania kombinacji klawiszy Ctrl + A. Symbol zastępczy sprawia, że ​​nie jest to wartość, ale jak sama nazwa wskazuje na symbol zastępczy. To jest używane w wielu formularzach online z napisem „Nazwa użytkownika tutaj” lub „E-mail”, a po kliknięciu „E-mail” znika i możesz od razu zacząć pisać.

Dokładne rozwiązanie tego, o co prosiłeś, to:

<input type="text" id="userid" name="userid" value="Please enter the user ID" onClick="this.setSelectionRange(0, this.value.length)"/>

Ale przypuszczam, że próbujesz pokazać „Wprowadź identyfikator użytkownika” jako symbol zastępczy lub podpowiedź w danych wejściowych. Możesz więc użyć następujących rozwiązań jako bardziej wydajnego rozwiązania:

<input type="text" id="userid" name="userid" placeholder="Please enter the user ID" />

Oto przykład w React, ale jeśli chcesz, możesz go przetłumaczyć na jQuery na waniliowym JS:

class Num extends React.Component {

    click = ev => {
        const el = ev.currentTarget;
        if(document.activeElement !== el) {
            setTimeout(() => {
                el.select();    
            }, 0);
        }
    }

    render() {
        return <input type="number" min={0} step={15} onMouseDown={this.click} {...this.props} />
    }
}

Sztuczka polega na tym, aby użyć onMouseDownelementu, ponieważ fokus jest już aktywowany do momentu uruchomienia zdarzenia „kliknięcia” (a zatem activeElementsprawdzenie zakończy się niepowodzeniem).

activeElementKontrola jest konieczna, tak aby użytkownik może umieścić swój kursor gdzie chcą bez ciągłego ponownego wyboru całą wejście.

Limit czasu jest konieczny, ponieważ w przeciwnym razie tekst zostanie zaznaczony, a następnie natychmiast niezaznaczony, ponieważ, jak sądzę, przeglądarka sprawdza pospolite położenie kursora.

I na koniec, el = ev.currentTargetjest to konieczne w React, ponieważ React ponownie wykorzystuje obiekty zdarzeń, a zdarzenie syntetyczne zostanie utracone do momentu uruchomienia setTimeout.

Problem z łapaniem zdarzenia kliknięcia polega na tym, że każde kolejne kliknięcie w tekście powoduje jego ponowne wybranie, podczas gdy użytkownik prawdopodobnie spodziewał się zmienić położenie kursora.

Dla mnie zadziałało zadeklarowanie zmiennej, selectSearchTextOnClick i ustawienie jej domyślnie na true. Moduł obsługi kliknięć sprawdza, czy zmienna jest nadal prawdziwa: jeśli tak, ustawia ją na fałsz i wykonuje funkcję select (). Następnie mam moduł obsługi zdarzenia rozmycia, który przywraca mu wartość true.

Dotychczasowe wyniki wydają się być zachowaniem, którego się spodziewałem.

(Edycja: Zlekceważyłem stwierdzenie, że próbowałem złapać zdarzenie skupienia, jak ktoś sugerował, ale to nie działa: po uruchomieniu zdarzenia skupienia zdarzenie kliknięcia może zostać uruchomione, natychmiast usuwając zaznaczenie tekstu).

To pytanie ma opcje, gdy .select () nie działa na platformach mobilnych: Programowe wybieranie tekstu w polu wejściowym na urządzeniach z iOS (mobilne Safari)

HTML tak <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

i kod javascript bez wiązania

function textSelector(ele){
    $(ele).select();
}

To normalna aktywność dla TextBox.

Kliknij 1 - Ustaw fokus

Kliknij 2/3 (podwójne kliknięcie) - Wybierz tekst

Możesz ustawić fokus na TextBox, gdy strona ładuje się po raz pierwszy, aby zredukować „select” do pojedynczego zdarzenia podwójnego kliknięcia.

W polu wprowadzania wpisz „symbol zastępczy” zamiast „wartość”.

Jeśli korzystasz z AngularJS, możesz użyć niestandardowej dyrektywy dla łatwego dostępu:

define(['angular'], function () {
    angular.module("selectionHelper", [])
    .directive('selectOnClick', function () {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {                
                element.on('click', function () {
                    this.select();
                });
            }
        };
    });
});

Teraz można po prostu użyć tego w następujący sposób:

<input type="text" select-on-click ... />

Próbka pochodzi z wymaganego - więc pierwszy i ostatni wiersz można pominąć, jeśli używasz czegoś innego.

Jeśli ktoś chce to zrobić na stronie, załaduj w / jQuery (słodkie dla pól wyszukiwania), oto moje rozwiązanie

jQuery.fn.focusAndSelect = function() {
    return this.each(function() {
        $(this).focus();
        if (this.setSelectionRange) {
            var len = $(this).val().length * 2;
            this.setSelectionRange(0, len);
        } else {
            $(this).val($(this).val());
        }
        this.scrollTop = 999999;
    });
};

(function ($) {
    $('#input').focusAndSelect();
})(jQuery);

Na podstawie tego postu. Dzięki CSS-Tricks.com

Jeśli próbujesz tylko zastąpić tekst zastępczy, gdy użytkownik wybierze element, to oczywiście najlepszą praktyką jest używanie placeholderatrybutu w dzisiejszych czasach. Jeśli jednak chcesz wybrać całą bieżącą wartość, gdy pole zostanie zogniskowane, kombinacja odpowiedzi @Cory House i @Toastrackenigma wydaje się być najbardziej kanoniczna. Użyj focusifocusout zdarzenia, z programami obsługi, które ustawiają / zwalniają bieżący element fokusa, i zaznaczają wszystko, gdy fokus jest aktywny. Przykład angular2 / maszynopisu jest następujący (ale konwersja na waniliowy js byłaby trywialna):

Szablon:

<input type="text" (focus)="focus()" (focusout)="focusout()" ... >

Składnik:

private focused = false;

public focusout = (): void => {
    this.focused = false;
};

public focus = (): void => {
    if(this.focused) return;
    this.focused = true;

    // Timeout for cross browser compatibility (Chrome)
    setTimeout(() => { document.execCommand('selectall', null, false); });
};