Onchange türünü "type" giriş türünde izlemenin en iyi yolu nedir?

Deneyimlerime göre, input type="text" onchangeolay genellikle yalnızca blurdenetimden çıktıktan ( ) sonra gerçekleşir .

onchangeHer textfieldiçerik değişikliğinde tarayıcıyı tetiklemeye zorlamanın bir yolu var mı ? Değilse, bunu “manuel” olarak izlemenin en zarif yolu nedir?

onkey*Etkinliği kullanmak güvenilir değildir, çünkü alanı sağ tıklayıp Yapıştır'ı seçebilirsiniz; bu, alanı klavye girişi olmadan değiştirir.

Mı setTimeouttek yolu? .. Çirkin :-)

Güncelleme:

Bkz. Başka cevap (2015).

Orijinal 2009 Cevabı:

Peki, onchangeetkinliğin tuş kilidi ile açılmasını, bulanıklaştırılmasını ve yapıştırılmasını mı istiyorsunuz? Bu sihir.

Değişiklikleri yazarken izlemek istiyorsanız, tuşunu kullanın "onkeydown". Yapıştırma işlemlerini fare ile yakalamanız gerekiyorsa "onpaste"( IE , FF3 ) ve "oninput"( FF, Opera, Chrome, Safari ¹ ) kullanın.

¹ _{Safari için <textarea>bozuldu. textInputBunun yerine kullan}

Bugünlerde dinliyorum oninput. onchangeElemana odaklanmaya gerek kalmadan hisseder . HTML5.

IE8 ve altı hariç herkes (mobil hatta) tarafından desteklenir. IE için ekleyin onpropertychange. Ben böyle kullanın:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

Aşağıdaki kod Jquery 1.8.3 ile benim için iyi çalışıyor

HTML: <input type="text" id="myId" />

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Javascript burada tahmin edilemez ve komik.

• onchange yalnızca metin kutusunu bulanıklaştırdığınızda oluşur
• onkeyup& onkeypressmetin değişiminde her zaman gerçekleşmez
• onkeydown metin değişikliğinde oluşur (ancak fare tıklamasıyla kes ve yapıştır işlemlerini izleyemez)
• onpaste& oncuttuşa basıldığında ve hatta sağ fare tıklamasıyla gerçekleşir.

Yani, metin kutusundaki değişikliği izlemek için onkeydown, oncutve gerekiyor onpaste. Bu olayın geri çağrısında, metin kutusunun değerini kontrol ederseniz, geri aramadan sonra değer değiştiği için güncellenmiş değeri alamazsınız. Bunun için bir çözüm, değişikliği izlemek için 50 mili saniye (veya daha az olabilir) zaman aşımı ile bir zaman aşımı işlevi ayarlamaktır.

Bu kirli bir hack ama araştırdığım tek yol bu.

İşte bir örnek. http://jsfiddle.net/2BfGC/12/

onkeyupyazdıktan sonra olur, örneğin tparmağımı kaldırdığımda basıyorum, eylem gerçekleşiyor, ancak keydownkarakterde rakamları çevirmedent

Umarım bu birisi için yararlıdır.

Şimdi onkeyupyazdıklarınızı göndermek istediğinizde daha iyidir.

Benzer bir gereksinimim vardı (twitter tarzı metin alanı). Kullanılan onkeyupve onchange. onchangeaslında alandan kayıp odak sırasında fare hamur işlemleri ilgilenir.

[Güncelleme] HTML5 veya sonraki sürümlerde, oninputyukarıdaki diğer yanıtlarda açıklandığı gibi gerçek zamanlı karakter değiştirme güncellemelerini almak için kullanın .

2018'de inputetkinliği kullanmak daha iyi olduğunu düşünüyorum .

-

WHATWG Spesifikasyonunun açıkladığı gibi ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Kullanıcı değeri değiştirdiğinde kontrollerde kullanılır (ayrıca bkz. Change olayı )

-

İşte nasıl kullanılacağına dair bir örnek:

<input type="text" oninput="handleValueChange()">

SADECE Internet Explorer kullanıyorsanız bunu kullanabilirsiniz:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Umarım yardımcı olur.

oldukça yakın bir çözüm var (tüm Yapıştır yollarını düzeltmeyin) ama çoğu:

Hem girdiler hem de textareas için çalışır:

<input type="text" ... >
<textarea ... >...</textarea>

Şunu yapın:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Dediğim gibi, tüm tarayıcılarda bir olayı ateşe yapıştırmanın tüm yolları ... en kötüsü hiç bir olayı ateşlemez, ancak Zamanlayıcılar böyle kullanmak için korkunçtur.

Ancak, Yapıştır yollarının çoğu klavye ve / veya fare ile yapılır, bu nedenle normalde bir onkeyup veya onmouseup bir macundan sonra tetiklenir, ayrıca klavyeye yazarken onkeyup tetiklenir.

Kontrol kodunun fazla zaman almadığından emin olun ... aksi takdirde kullanıcı kötü bir izlenim edinir.

Evet, hile anahtar ve fare ateş etmektir ... ama her ikisi de ateş olabilir dikkat, bu yüzden böyle unutmayın!

Lütfen JQuery kullanarak bir sonraki yaklaşımı değerlendirin:

HTML:

<input type="text" id="inputId" />

JavaScript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});

"girdi" benim için çalıştı.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

Sen kullanabilirsiniz keydown, keyupve keypresssıra olayları.

Her birini izlemek için bu örneği deneyin ve bundan önce imleç yanıp sönme oranını tamamen sıfıra indirin.

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: olay çıkışta oluşturulur

onchange: giriş metninde herhangi bir değişiklik yapılırsa olay çıkışta oluşturulur

onkeydown: olay herhangi bir tuşa basıldığında oluşur (tuşun uzun süre tutulması için)

onkeyup: herhangi bir anahtar sürümünde etkinlik oluşturulur

onkeypress: onkeydown (veya onkeyup) ile aynıdır ancak ctrl, backsace, alt other için tepki vermez

2018 burada, yaptığım şey:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Bu yaklaşımdaki kusurları gösterebilirseniz minnettar olurum.

Yöntem 1: için bir olay dinleyicisi ekleyin input:

element.addEventListener("input", myFunction);

Yöntem 2:oninput özelliği JavaScript ile tanımlayın :

element.oninput = function()
{
    myFunction();
};

Yöntem 3:oninput özelliği HTML ile tanımlayın :

<input type="text" oninput="myFunction();">

IE8'de Robert Siemer addEventListener desteklenmez.

"IE'nin eski sürümleri eşdeğer, tescilli EventTarget.attachEvent () yöntemini destekledi." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener