Odaklanınca metin kutusunun tüm içeriğini seç (Vanilla JS veya jQuery)

Metin kutusu odaklandığında metin kutusunun tüm içeriğini seçecek bir Vanilla JS veya jQuery çözümü nedir?

$(document).ready(function() {
    $("input:text").focus(function() { $(this).select(); } );
});

$(document).ready(function() {
  $("input[type=text]").focus().select();
});

$(document).ready(function() {
    $("input:text")
        .focus(function () { $(this).select(); } )
        .mouseup(function (e) {e.preventDefault(); });
});

jQuery, bazı durumlarda kullanımı daha kolay olan JavaScript değildir.

Şu örneğe bakın:

<textarea rows="10" cols="50" onclick="this.focus();this.select()">Text is here</textarea>

Kaynak: CSS Hileleri , MDN

Bu sadece bir Chrome / Safari sorunu değil, Firefox 18.0.1 ile oldukça benzer bir davranış yaşadım. Komik yanı, bunun MSIE'de olmaması! Buradaki sorun , giriş içeriğinin seçimini kaldırmaya zorlayan ilk fare olayıdır, bu yüzden sadece ilk oluşumu görmezden gelin.

$(':text').focus(function(){
    $(this).one('mouseup', function(event){
        event.preventDefault();
    }).select();
});

TimeOut yaklaşımı garip bir davranışa neden olur ve her mouseup olayını engellediğinde, giriş öğesine tekrar tıklayarak seçimi kaldıramazsınız.

HTML:

Enter Your Text : <input type="text" id="text-filed" value="test">

JS kullanma:

var textFiled = document.getElementById("text-filed");
textFiled.addEventListener("focus", function() { this.select(); });

JQuery kullanma:

$("#text-filed").focus(function() { $(this).select(); } );

React JS'yi kullanma:

İlgili bileşenin içindeki oluşturma işlevi -

<input
  type="text"
  value="test"
  onFocus={e => e.target.select()}
/>

benim çözümüm bir zaman aşımı kullanmak. Tamam görünüyor

$('input[type=text]').focus(function() {
    var _this = this;
    setTimeout(function() {
        _this.select();
    }, 10);
});

Bu ayrıca iOS'ta da çalışır:

<input type="text" onclick="this.focus(); this.setSelectionRange(0, 9999);" />

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select

Satır içi kodun kötü stil olduğunu biliyorum, ama bunu bir .js dosyasına koymak istemedim. JQuery olmadan çalışır!

<input type="text" value="blah blah" onfocus="this.select(); this.selAll=1;" onmouseup="if(this.selAll==0) return true; this.selAll=0; return false;"></input>

Buradaki yanıtlar bir noktaya kadar bana yardımcı oldu, ancak Chrome'daki yukarı / aşağı düğmelerini tıklarken HTML5 Numarası giriş alanlarında bir sorun yaşadım.

Düğmelerden birine tıklarsanız ve fareyi düğmenin üzerinde bırakırsanız, fare düğmesinin atıldığı için fare düğmesini basılı tuttuğunuzda sayı değişmeye devam eder.

Aşağıdaki gibi tetiklendiğinde fare işleyicisini kaldırarak bunu çözdüm:

    $("input:number").focus(function () {
        var $elem = $(this);
        $elem.select().mouseup(function (e) {
            e.preventDefault();
            $elem.unbind(e.type);
        });
    });

Umarım bu gelecekte insanlara yardımcı olur ...

Bu işe yarayacak, Deneyin -

<input id="textField1" onfocus="this.select()" onmouseup="return false" /> 

Safari / IE 9 ve Chrome'da çalışıyor, Firefox'ta test etme şansım olmadı.

Burada zaten birçok cevap olduğunu biliyorum - ama bu şimdiye kadar eksik; ajax tarafından oluşturulan içerikle de çalışan bir çözüm:

$(function (){
    $(document).on("focus", "input:text", function() { 
        $(this).select(); 
    });
});

Birkaç işlev çağrısı ekleyerek Zach'in cevabını biraz geliştirebildim. Bu yanıtla ilgili sorun, onMouseUp ürününü tamamen devre dışı bırakması ve böylece odaklandıktan sonra metin kutusunu tıklatmanızı engellemesidir.

İşte benim kod:

<input type="text" onfocus="this.select()" onMouseUp="javascript:TextBoxMouseUp();" onMouseDown="javascript:TextBoxMouseDown();" />

<script type="text/javascript">
    var doMouseUp = true;
    function TextBoxMouseDown() {
        doMouseUp = this == document.activeElement;
        return doMouseUp;
    }
    function TextBoxMouseUp() {
        if (doMouseUp)
        { return true; }
        else {
            doMouseUp = true;
            return false;
        }
    }
</script>

Bu Zach'in cevabı üzerinde hafif bir gelişme. IE'de mükemmel çalışır, Chrome'da hiç çalışmaz ve FireFox'ta alternatif başarı ile çalışır (kelimenin tam anlamıyla her seferinde). Birinin FF veya Chrome'da nasıl güvenilir bir şekilde çalışacağına dair bir fikri varsa, lütfen paylaşın.

Her neyse, bunu biraz daha güzel hale getirmek için elimden geleni yapacağımı düşündüm.

@Travis ve @Mari gibi, kullanıcı tıkladığında otomatik olarak seçmek istedim; bu, bir mouseupetkinliğin varsayılan davranışını önlemek anlamına gelir , ancak kullanıcının tıklamasını engellemez. IE11, Chrome 45, Opera 32 ve Firefox 29'da (şu anda yüklediğim tarayıcılar) çalışan, bulduğum çözüm, bir fare tıklamasında yer alan olayların sırasına dayanıyor.

Odağı olmayan bir metin girişini tıklattığınızda, şu olayları alırsınız (diğerleri arasında):

• mousedown: Tıklamanıza yanıt olarak. focusGerekirse varsayılan işlem yükselir ve seçim başlangıcını ayarlar.
• focus: Öğesinin varsayılan kullanımının bir parçası olarak mousedown.
• mouseup: Varsayılan işleme, seçim sonunu belirleyecek olan tıklamanızın tamamlanması.

Zaten odağı olan bir metin girişini tıklattığınızda focusetkinlik atlanır. @Travis ve @Mari'nin her ikisinin de dikkatle fark ettiği gibi, varsayılan olay işleme mouseupyalnızca focusolay gerçekleştiğinde engellenmelidir . Ancak, " focusolmadı" olayı olmadığından, mousedownişleyici içinde yapabileceğimiz bunu çıkarmamız gerekir .

@ Mari'nin çözümü, kaçınmak istediğim jQuery'nin içe aktarılmasını gerektirir. @ Travis'in çözümü bunu teftiş ederek yapar document.activeElement. Çözümünün neden tarayıcılarda tam olarak çalışmadığını bilmiyorum, ancak metin girişinin odaklanıp odaklanmadığını izlemenin başka bir yolu var: sadece focusve blurolaylarını takip edin .

İşte benim için çalışan kod:

    var blockMouseUp = false;
    var customerInputFocused = false;

    txtCustomer.onfocus =
      function ()
      {
        try
        {
          txtCustomer.selectionStart = 0;
          txtCustomer.selectionEnd = txtCustomer.value.length;
        }
        catch (error)
        {
          txtCustomer.select();
        }

        customerInputFocused = true;
      };

    txtCustomer.onblur =
      function ()
      {
        customerInputFocused = false;
      };

    txtCustomer.onmousedown =
      function ()
      {
        blockMouseUp = !customerInputFocused;
      };

    txtCustomer.onmouseup =
      function ()
      {
        if (blockMouseUp)
          return false;
      };

Umarım bu birisine yardım eder. :-)

onclick="this.focus();this.select()"

Metin kutusu odaklandığında metin kutusunun tüm içeriğini seçecek bir JavaScript veya jQuery çözümü nedir?

Yalnızca aşağıdaki özelliği eklemeniz gerekir:

onfocus="this.select()"

Örneğin:

<input type="text" value="sometext" onfocus="this.select()">

(Dürüst olmak gerekirse, neden başka bir şeye ihtiyacınız olduğuna dair hiçbir fikrim yok.)

Bu benim için çalıştı (cevaplarda değil, yorumda olduğu için yayınlama)

 $("#textBox").focus().select();

$('input').focus(function () {
    var self = $(this);
    setTimeout(function () {
        self.select();
    }, 1);        
});

Düzenleme: @ @ DavidG isteği başına, bu neden çalıştığından emin değilim çünkü ayrıntıları sağlayamıyorum, ancak yukarı veya aşağı yayılan odak olayı veya ne yaparsa yapsın ve bildirimi alan girdi öğesi ile ilgili bir şey olduğuna inanıyorum odaklanıldı. Zaman aşımını ayarlamak, öğeye bunun gerçekleştiğini anlaması için bir an verir.

Olayları birlikte zincirlerseniz, .onebu iş parçacığında başka bir yerde önerildiği gibi kullanma ihtiyacını ortadan kaldırdığına inanıyorum .

Misal:

$('input.your_element').focus( function () {
    $(this).select().mouseup( function (e) {
        e.preventDefault();
    });
});

Not: ASP.NET'te programlama yapıyorsanız, komut dosyasını C # 'da ScriptManager.RegisterStartupScript kullanarak çalıştırabilirsiniz:

ScriptManager.RegisterStartupScript(txtField, txtField.GetType(), txtField.AccessKey, "$('#MainContent_txtField').focus(function() { $(this).select(); });", true );

Veya komut dosyasını diğer cevaplarda önerilen HTML sayfasına yazın.

Bunu bir yere ekiyorum, mükemmel çalış!

            $('input').on('focus', function (e) {
                $(this)
                $(element).one('mouseup', function () {
                        $(this).select();
                        return false;
                    })                        .select();
            });

Partiye geç kaldım, ancak bu IE11, Chrome, Firefox'ta, mouseup (ve JQuery olmadan) bozmadan mükemmel çalışıyor.

inputElement.addEventListener("focus", function (e) {
    var target = e.currentTarget;
    if (target) {
        target.select();
        target.addEventListener("mouseup", function _tempoMouseUp(event) {
            event.preventDefault();
            target.removeEventListener("mouseup", _tempoMouseUp);
        });
    }
});

Sıradaki çözümüm:

var mouseUp;
$(document).ready(function() {
    $(inputSelector).focus(function() {
        this.select();
    }) 
    .mousedown(function () {
        if ($(this).is(":focus")) {
          mouseUp = true;
        }
        else {
          mouseUp = false;
        }
     })
     .mouseup(function () {
        return mouseUp;
     });
});

Dolayısıyla mouseup genellikle çalışır, ancak girdi ile odaklandıktan sonra seçimi kaldırmaz