jQuery-wybierz cały tekst z obszaru tekstowego

Question

jQuery-wybierz cały tekst z obszaru tekstowego

Jak to zrobić, gdy klikniesz wewnątrz textarea, cała jego zawartość zostanie wybrana?

I ostatecznie po ponownym kliknięciu, aby go odznaczyć.

121

javascript jquery forms textarea selection

Author: Alex, 2011-04-27

Source

6 answers

Lepszy sposób, z rozwiązaniem problemu tab i chrome oraz nowym sposobem jquery

$("#element").on("focus keyup", function(e){

        var keycode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;
        if(keycode === 9 || !keycode){
            // Hacemos select
            var $this = $(this);
            $this.select();

            // Para Chrome's que da problema
            $this.on("mouseup", function() {
                // Unbindeamos el mouseup
                $this.off("mouseup");
                return false;
            });
        }
    });

14

Author: Matiesky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-20 13:17:39

Skończyło się na tym:

$('.selectAll').toggle(function() {
  $(this).select();
}, function() {
  $(this).unselect();
});

11

Author: Alex,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-04-26 23:32:46

Nieco krótsza wersja jQuery:

$('your-element').focus(function(e) {
  e.target.select();
  jQuery(e.target).one('mouseup', function(e) {
    e.preventDefault();
  });
});

Prawidłowo obsługuje chromowaną obudowę narożną. Zobacz http://jsfiddle.net/Ztyx/XMkwm / na przykład.

5

Author: Ztyx,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-13 09:33:09

$('textarea').focus(function() {
    this.select();
}).mouseup(function() {
    return false;
});

5

Author: Phil LaNasa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-24 18:48:47

Zaznaczanie tekstu w elemencie (podobne do podświetlania myszką)

:)

Używając zaakceptowanej odpowiedzi w tym poście, możesz wywołać funkcję w następujący sposób:

$(function() {
  $('#textareaId').click(function() {
    SelectText('#textareaId');
  });
});

4

Author: Todd,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:33:16

score 184 · Accepted Answer

Aby nie denerwować użytkownika, gdy cały tekst jest zaznaczany za każdym razem, gdy próbuje przesunąć karetkę za pomocą myszy, należy to zrobić za pomocą zdarzenia focus, a nie Zdarzenia click. Poniżej znajduje się rozwiązanie problemu w Chrome, który uniemożliwia działanie najprostszej wersji (np. wywołanie metody textarea select() w obsłudze zdarzeń focus).

JsFiddle: http://jsfiddle.net/NM62A/

Kod:

<textarea id="foo">Some text</textarea>

<script type="text/javascript">
    var textBox = document.getElementById("foo");
    textBox.onfocus = function() {
        textBox.select();

        // Work around Chrome's little problem
        textBox.onmouseup = function() {
            // Prevent further mouseup intervention
            textBox.onmouseup = null;
            return false;
        };
    };
</script>

JQuery wersja:

$("#foo").focus(function() {
    var $this = $(this);
    $this.select();

    // Work around Chrome's little problem
    $this.mouseup(function() {
        // Prevent further mouseup intervention
        $this.unbind("mouseup");
        return false;
    });
});