Tıklandığında HTML metin girişindeki tüm metni seçme

Bir HTML web sayfasında bir metin kutusu görüntülemek için aşağıdaki kodu var.

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

Sayfa görüntülendiğinde, metin Lütfen kullanıcı kimliği girin mesajını içerir. Ancak, kullanıcının tüm metni seçmek için 3 kez tıklaması gerektiğini buldum (bu durumda lütfen kullanıcı kimliğini girin ).

Metnin tamamını tek bir tıklama ile seçmek mümkün müdür?

Düzenle:

Maalesef şunu söylemeyi unuttum: Girişi kullanmalıyım type="text"

Bu javascript snippet'ini kullanabilirsiniz:

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

Ancak görünüşe göre mobil Safari'de çalışmıyor. Bu gibi durumlarda şunları kullanabilirsiniz:

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

Önceden gönderilen çözümlerin iki tuhaflığı vardır:

1. Chrome'da .select () yoluyla seçim yapışmaz - hafif bir zaman aşımı eklemek bu sorunu çözer.
2. Odaktan sonra imleci istenen bir noktaya yerleştirmek imkansızdır.

İşte odaktaki tüm metni seçen ancak odaktan sonra belirli bir imleç noktası seçmeye izin veren eksiksiz bir çözüm.

        $(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 (onclick niteliğini, sayfada çalışmasını istediğiniz her girdiye koymanız gerekir)

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

VEYA DAHA İYİ BİR SEÇENEK

jQuery (bu, sayfadaki her metin girişi için çalışır, html'nizi değiştirmenize gerek yoktur):

<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>

Bu eski olduğunu biliyorum, ama en iyi seçenek şimdi placeholdermümkünse yeni HTML özelliğini kullanmaktır :

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

Bu, bir değer girilmedikçe metnin gösterilmesine neden olarak metin seçme veya girişleri temizleme ihtiyacını ortadan kaldırır.

Listelenen cevaplar bana göre kısmi. Aşağıda bunu Angular ve JQuery ile nasıl yapacağınıza dair iki örnek verdim.

Bu çözüm aşağıdaki özelliklere sahiptir:

• JQuery, Safari, Chrome, IE, Firefox vb. Destekleyen tüm tarayıcılarda çalışır.
• Phonegap / Cordova için çalışır: Android ve IO'lar.
• Giriş bir sonraki bulanıklaşmaya ve sonra odaklanana kadar yalnızca bir kez seçim yapar
• Birden fazla giriş kullanılabilir ve hata yapmaz.
• Açısal yönerge büyük yeniden kullanıma sahiptir, sadece tıklama üzerine direktif seçin
• JQuery kolayca değiştirilebilir

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);
    }
  }
});

Açısal: 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;
      });
    }
  };
}]);

Deneyin:

onclick="this.select()"

Benim için harika çalışıyor.

Her zaman kullanabilirsiniz document.execCommand( tüm büyük tarayıcılarda desteklenir )

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

O anda odaklanılan öğedeki tüm metni seçer.

onfocus olayıyla otomatik odaklama girişi:

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

Bu, istenen öğe seçiliyken bir form açmanızı sağlar. Girişe vurmak için otomatik netleme kullanarak çalışır, daha sonra kendisine bir onfocus olayı gönderir ve bu da metni seçer.

Not: Eğer dikkate aldığımızda onclick="this.select()", belki girmek düzenlemek şey istedim sonra ilk basarak, tüm karakterler, seçilir ve tekrar karakterler arasında tıklayarak ama yine tüm karakterleri seçecektir. Bu sorunu gidermek için onfocusyerine kullanmalısınız onclick.

Gerçekten, kullanın onclick="this.select();"ama ile birleştirmemeyi unutmayın disabled="disabled"- o zaman işe yaramaz ve yine de seçmek için manuel olarak seçmeniz veya çoklu tıklamanız gerekir. Seçilecek içerik değerini kilitlemek istiyorsanız, özellik ile birleştirin readonly.

İşte Shoban'ın cevabının yeniden kullanılabilir bir versiyonu:

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

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

Bu şekilde, açık komut dosyasını birden çok öğe için yeniden kullanabilirsiniz.

Değiştirebilirsiniz

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

İle:

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

Yer tutucu, değeri, kullanıcıların birden fazla kez tıklamak zorunda kalmadan veya ctrl + a kullanarak metin kutusuna Yazmalarını istediğiniz şekilde değiştirmek için kullanılır. Yer tutucu bunu bir değer değil, adın bir yer tutucu önerdiği şekilde yapar. Buradaki "Kullanıcı adı burada" veya "E-posta" yazan birden çok çevrimiçi formda kullanılır ve üzerine tıkladığınızda "E-posta" kaybolur ve hemen yazmaya başlayabilirsiniz.

Sorduğunuza kesin çözüm:

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

Ancak herhalde girişte yer tutucu veya ipucu olarak "Lütfen kullanıcı kimliğini girin" i göstermeye çalışıyorsunuz . Böylece, aşağıdakileri daha verimli bir çözüm olarak kullanabilirsiniz:

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

İşte React'te bir örnek, ancak isterseniz vanilya JS'de jQuery'ye çevrilebilir:

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} />
    }
}

Buradaki hileyi kullanmaktır, onMouseDownçünkü "click" olayı başladığında öğe zaten odaklanmıştır (ve böylece activeElementkontrol başarısız olacaktır).

activeElementÇek bunlar kullanıcı sürekli tüm giriş-seçmeden yeniden olmadan istediğiniz imlecini konumlandırabilmesidir gerekli böyledir.

Zaman aşımı gereklidir, çünkü aksi takdirde metin seçilecek ve hemen seçilmeyecektir, çünkü sanırım tarayıcı imleç konumlandırma kontrolünden sonra kelimeleri yapar.

Ve son olarak, el = ev.currentTargetgerekli tepki de çünkü yeniden kullanımları olay nesneleri tepki ve zaman setTimeout yangınları ile sentetik olayı kaybedersiniz.

Click olayını yakalamadaki sorun, metin içindeki sonraki her tıklamanın tekrar seçmesi ve kullanıcı muhtemelen imleci yeniden konumlandırmayı beklemesidir.

Benim için işe yarayan bir değişkeni bildirmekti, SelectSearchTextOnClick ve varsayılan olarak true olarak ayarlıyordu. Tıklama işleyicisi değişkenin hala doğru olup olmadığını kontrol eder: öyleyse, false olarak ayarlar ve select () işlemini gerçekleştirir. Sonra onu geri true olarak ayarlayan bir bulanıklık olay işleyicisi var.

Sonuçlar şimdiye kadar beklediğim davranış gibi görünüyor.

(Düzenleme: Birinin önerdiği gibi odak olayını yakalamaya çalıştığımı söylemeyi ihmal ettim, ancak bu işe yaramadı: odak olayı tetiklendikten sonra, tıklama olayı hemen metnin seçimini kaldırarak tetiklenebilir).

Bu soru, .select () öğesinin mobil platformlarda çalışmadığı zaman kullanılabilecek seçenekler içerir: iOS aygıtlarındaki (mobil Safari) bir giriş alanında programlı olarak metin seçme

Html bunu beğendi <input type="text" value="click the input to select" onclick="javascript:textSelector(this)"/>

ve bağlama olmadan javascript kodu

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

Bu bir TextBox için normal bir etkinliktir.

1 - Odağı ayarla'yı tıklayın

Tıkla 2/3 (çift tıklama) - Metin seç

"Seç" i tek bir çift tıklama olayına indirgemek için sayfa ilk yüklendiğinde TextBox'a odaklanmayı ayarlayabilirsiniz .

Giriş alanınızda "değer" yerine "yer tutucu" kullanın.

AngularJS kullanıyorsanız, kolay erişim için özel bir yönerge kullanabilirsiniz:

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

Şimdi sadece şöyle kullanabilirsiniz:

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

Örnek requirjs ile - başka bir şey kullanılırsa ilk ve son satır atlanabilir.

Herkes bunu sayfa yük w / jQuery (arama alanları için tatlı) w / yapmak istiyorum İşte benim çözüm

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);

Bu gönderiye dayanarak . CSS-Tricks.com'a teşekkürler

Bir kullanıcı öğeyi seçtiğinde değiştirilen yer tutucu metne sahip olmaya çalışıyorsanız, placeholdergünümüzde özniteliği kullanmak en iyi uygulamadır . Ancak, bir alan odak kazandığında geçerli değerin tümünü seçmek istiyorsanız, @Cory House ve @Toastrackenigma cevaplarının bir kombinasyonu en standarttır. Geçerli odak öğesini ayarlayan / serbest bırakan işleyicileri olan focusve focusoutolayları kullanın ve odaklandığında tümünü seçin. Bir açısal2 / daktilo örneği aşağıdaki gibidir (ancak vanilya js'ye dönüştürmek önemsiz olacaktır):

Şablon:

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

Bileşen:

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); });
};