Bir metin kutusunun içeriği nasıl algılanır

Bir metin kutusunun içeriği her değiştiğinde algılamak istiyorum. Keyup yöntemini kullanabilirim, ancak bu aynı zamanda ok tuşları gibi harf üretmeyen tuş vuruşlarını da algılar. Keyup olayını kullanarak bunu yapmanın iki yöntemini düşündüm:

1. Basılan tuşun ascii kodunun \ backspace \ delete harfi olup olmadığını açıkça kontrol edin
2. Tuş vuruşundan önce metin kutusundaki metnin ne olduğunu hatırlamak için kapaklarını kullanın ve bunun değişip değişmediğini kontrol edin.

Her ikisi de biraz hantal görünüyor.

'Değiştir' yerine 'giriş' olayını izlemeye başlayın.

jQuery('#some_text_box').on('input', function() {
    // do your stuff
});

... güzel ve temiz, ancak aşağıdakilere daha da genişletilebilir:

jQuery('#some_text_box').on('input propertychange paste', function() {
    // do your stuff
});

HTML / standart JavaScript'te onchange olayını kullanın.

JQuery de change () olayıdır. Örneğin:

$('element').change(function() { // do something } );

DÜZENLE

Bazı yorumları okuduktan sonra ne olacak?

$(function() {
    var content = $('#myContent').val();

    $('#myContent').keyup(function() { 
        if ($('#myContent').val() != content) {
            content = $('#myContent').val();
            alert('Content has been changed');
        }
    });
});

'Change' olayı düzgün çalışmıyor, ancak 'input' mükemmel.

$('#your_textbox').bind('input', function() {
    /* This will be fired every time, when textbox's value changes. */
} );

Buna ne dersin:

<jQuery 1.7

$("#input").bind("propertychange change keyup paste input", function(){
    // do stuff;
});

> jQuery 1.7

$("#input").on("propertychange change keyup paste input", function(){
    // do stuff;
});

Bu IE8 / IE9, FF, Chrome'da çalışır

Tuş vuruşundan önce onay kutusundaki metnin ne olduğunu hatırlamak için kapaklarını kullanın ve bunun değişip değişmediğini kontrol edin.

Evet. Kapakları mutlaka kullanmak zorunda değilsiniz, ancak eski değeri hatırlamanız ve yenisiyle karşılaştırmanız gerekir.

Ancak! Bu, her değişikliği yakalamayacaktır, çünkü herhangi bir tuşa basma içermeyen metin kutusu içeriğini düzenlemenin bir yolu vardır. Örneğin, bir metin aralığı seçip sağ tıklatarak kesin. Veya sürükleyerek. Veya metni başka bir uygulamadan metin kutusuna bırakmak. Veya tarayıcının yazım denetimi yoluyla bir kelimeyi değiştirme. Veya...

Bu yüzden her değişikliği tespit etmeniz gerekiyorsa, bunun için anket yapmak zorundasınız. window.setIntervalAlanı her saniye (önceki) önceki değerine göre kontrol edebilirsiniz . Ayrıca tel olabilir onkeyupo değişiklikler nedenle aynı fonksiyona olan basılmasını neden çabuk yansır.

Hantal? Evet. Ancak bu ya da normal HTML değişim yolunu yapın ve anında güncellemeye çalışmayın.

$(document).on('input','#mytxtBox',function () { 
 console.log($('#mytxtBox').val());
});

Metin kutusundaki içerik değişikliğini algılamak için 'giriş' olayını kullanabilirsiniz. Jquery-1.7'de kullanımdan kaldırıldığı için olayı bağlamak için 'canlı' kullanmayın, bu yüzden 'açık'ı kullanın.

Metin kutusu değiştiğinde etkileşimli bir şey yapmak istediğinizi varsayalım (yani bazı verileri ajax aracılığıyla alın). Aynı işlevselliği arıyordum. Küresel kullanımı en sağlam ya da zarif bir çözüm değil, biliyorum. İşte bir örnek:

var searchValue = $('#Search').val();
$(function () {
    setTimeout(checkSearchChanged, 0.1);
});

function checkSearchChanged() {
    var currentValue = $('#Search').val();
    if ((currentValue) && currentValue != searchValue && currentValue != '') {
        searchValue = $('#Search').val();
        $('#submit').click();
    }
    else {
        setTimeout(checkSearchChanged, 0.1);
    }
}

Burada dikkat edilmesi gereken önemli bir şey, aynı anda birden fazla istek göndermek istemediğim için setTimeout ve setInterval kullanmıyorum. Bu, form gönderildiğinde zamanlayıcının "durmasını" ve istek tamamlandığında "başlatılmasını" sağlar. Bunu ajax çağrım tamamlandığında checkSearchChanged arayarak yapıyorum. Açıkçası, minimum uzunluğu vb. Kontrol etmek için bunu genişletebilirsiniz.

Benim durumumda, ben ASP.Net MVC kullanıyorum böylece MVC Ajax ile de aşağıdaki yazı nasıl bağlamak görebilirsiniz:

http://geekswithblogs.net/DougLampe/archive/2010/12/21/simple-interactive-search-with-jquery-and-asp.net-mvc.aspx

JQuery UI otomatik tamamlama widget'ına bir göz atmanızı tavsiye ederim. Kod tabanları orada olanlardan daha olgun olduğu için, vakaların çoğunu ele aldılar.

Aşağıda bir demo sayfasının bağlantısı bulunmaktadır, böylece çalıştığını doğrulayabilirsiniz. http://jqueryui.com/demos/autocomplete/#default

Kaynağı okumaktan ve nasıl çözdüklerini görmekten en iyi şekilde faydalanırsınız. Burada bulabilirsiniz: https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js .

Temelde her şeyi yapıyorlar, bağlanıyorlar input, keydown, keyup, keypress, focus and blur. Sonra her türlü anahtar için özel kullanım var page up, page down, up arrow key and down arrow key. Metin kutusunun içeriğini almadan önce bir zamanlayıcı kullanılır. Bir kullanıcı bir komuta karşılık gelmeyen bir anahtar yazdığında (yukarı tuşu, aşağı tuşu vb.) Yaklaşık 300 milisaniyeden sonra içeriği araştıran bir zamanlayıcı vardır. Kodda şöyle görünüyor:

// switch statement in the 
switch( event.keyCode ) {
            //...
            case keyCode.ENTER:
            case keyCode.NUMPAD_ENTER:
                // when menu is open and has focus
                if ( this.menu.active ) {
                    // #6055 - Opera still allows the keypress to occur
                    // which causes forms to submit
                    suppressKeyPress = true;
                    event.preventDefault();
                    this.menu.select( event );
                }
                break;
            default:
                suppressKeyPressRepeat = true;
                // search timeout should be triggered before the input value is changed
                this._searchTimeout( event );
                break;
            }
// ...
// ...
_searchTimeout: function( event ) {
    clearTimeout( this.searching );
    this.searching = this._delay(function() { // * essentially a warpper for a setTimeout call *
        // only search if the value has changed
        if ( this.term !== this._value() ) { // * _value is a wrapper to get the value *
            this.selectedItem = null;
            this.search( null, event );
        }
    }, this.options.delay );
},

Bir zamanlayıcı kullanmanın nedeni, kullanıcı arayüzünün güncellenme şansı elde etmesidir. Javascript çalışırken UI güncellenemez, bu nedenle gecikme işlevine çağrı. Bu, metin kutusuna odaklanma (bu kod tarafından kullanılan) gibi diğer durumlar için iyi çalışır.

Yani jQuery kullanıcı arabirimi kullanmıyorsanız widget'ı kullanabilir veya kodu kendi widget'ınıza kopyalayabilirsiniz (veya benim durumumda özel bir widget geliştiriyorsunuz).

Metin kutusunun içeriğinin gerçek zamanlı olarak ne zaman değiştiğini neden saptamaya çalıştığınızı sormak istiyorum ?

Bir alternatif, bir zamanlayıcı ayarlamak (setIntval? Aracılığıyla) ve son kaydedilen değeri geçerli olanla karşılaştırmak ve daha sonra bir zamanlayıcıyı sıfırlamaktır. Bu, tuşların, farenin, dikkate almadığınız diğer bazı giriş cihazlarının veya JavaScript'in uygulamanın farklı bir bölümünden değerini değiştirmesini (kimsenin bahsetmediği başka bir olasılık) neden olduğu HERHANGİ bir değişikliği yakalamayı garanti eder.

change olayını kullanmayı düşünüyor musunuz?

$("#myTextBox").change(function() { alert("content changed"); });

textchangeTarayıcılar arası inputuyumluluk için etkinliği özelleştirilmiş jQuery shim ile kullanın . http://benalpert.com/2013/06/18/a-near-perfect-oninput-shim-for-ie-8-and-9.html (en son çatallı github: https://github.com/pandell /jquery-splendid-textchange/blob/master/jquery.splendid.textchange.js )

Bu saplar da dahil tüm giriş etiketleri <textarea>content</textarea>her zaman çalışmaz, hangi change keyupvb (!) Sadece jQuery on("input propertychange")kolları <textarea>sürekli etiketleri ve yukarıda anlamıyorum tüm tarayıcılar için bir dolgu olan inputolay.

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/pandell/jquery-splendid-textchange/master/jquery.splendid.textchange.js"></script>
<meta charset=utf-8 />
<title>splendid textchange test</title>

<script> // this is all you have to do. using splendid.textchange.js

$('textarea').on("textchange",function(){ 
  yourFunctionHere($(this).val());    });  

</script>
</head>
<body>
  <textarea style="height:3em;width:90%"></textarea>
</body>
</html>

JS Bin testi

Bu aynı zamanda yapıştırma, silme işlemlerini gerçekleştirir ve tuşa basma çabalarını tekrarlamaz.

Bir dolgu kullanmıyorsanız, jQuery on("input propertychange")olaylarını kullanın .

// works with most recent browsers (use this if not using src="...splendid.textchange.js")

$('textarea').on("input propertychange",function(){ 
  yourFunctionHere($(this).val());    
});  

Burada tam bir çalışma örneği var .

<html>
<title>jQuery Summing</title>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>
$(document).ready(function() {
$('.calc').on('input', function() {
var t1 = document.getElementById('txt1');
var t2 = document.getElementById('txt2');
var tot=0;
if (parseInt(t1.value))
tot += parseInt(t1.value);
if (parseInt(t2.value))
tot += parseInt(t2.value);
document.getElementById('txt3').value = tot;
});
});
</script>
</head>
<body>
<input type='text' class='calc' id='txt1'>
<input type='text' class='calc' id='txt2'>
<input type='text' id='txt3' readonly>
</body>
</html>

Böyle bir şey çalışmalı, esas olarak, çünkü focusve focusoutiki ayrı değerlerle sona ereceğini. dataÖğeyi değerleri içinde sakladığı, ancak DOM'a dokunmadığı için burada kullanıyorum . Ayrıca, öğesine bağlı değeri saklamanın kolay bir yoludur. Daha yüksek kapsamlı bir değişkeni kolayca kullanabilirsiniz.

var changed = false;

$('textbox').on('focus', function(e) {
    $(this).data('current-val', $(this).text();
});

$('textbox').on('focusout', function(e) {
    if ($(this).data('current-val') != $(this).text())
        changed = true;
    }
    console.log('Changed Result', changed);
}

Bu Kod, bir metin kutusunun içeriğinin kullanıcı tarafından ve Javascript kodu ile her değiştirildiğinde değiştirilir.

var $myText = jQuery("#textbox");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
    val = $myText.val();

    if (data !== val) {
        console.log("changed");
        $myText.data("value", val);
    }
}, 100);