html <input type = "text" /> onchange olayı çalışmıyor


88

Bazı deneyler yapmaya çalışıyorum. Olmasını istediğim şey, kullanıcı metin kutusuna her bir şey yazdığında, bir iletişim kutusunda görüntülenecek olmasıdır. Kullandığım onchangeBunun gerçekleşmesi için olay özelliği ama işi yapmaz. Çalışması için yine de gönder düğmesine basmam gerekiyor. AJAX hakkında okudum ve bunu öğrenmeyi düşünüyorum. Çalışması için hala AJAX'a ihtiyacım var mı yoksa yeterince basit bir JavaScript mi? Lütfen yardım et.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

4
id yerine "this" i gönderebilirsiniz, böylece getElementById'ı aramanıza gerek kalmaz
remi bourgarel

Evet ... teşekkürler Ash Burlaczenko'nun bana söylediğini yaptım ...
Yeni Başlayan Kodlayıcı

JQuery ile burada güzel bir çözüm önerildi: stackoverflow.com/a/8167009/2065594
Cyril Jacquart

Yanıtlar:


127

onchangeyalnızca kontrol bulanık olduğunda tetiklenir. Onun onkeypressyerine deneyin .


19
Kullanıcı panodan yapıştırdıktan sonra değişikliği algılamak için çalışmaz
Juozas Kontvainis

19
Bu sadece sorunumu çözdü. onkeyupYine de tercih ediyorum , çünkü input('element.value')
stealthjong

4
Ayrıca, en azından jquery kullanırken, geri tuşuna bastıktan sonra "tuşa basmanın" artmadığını fark ettim. Geri tuşuna basıp bıraktıktan sonra "keyup" yükseltiliyor. "girdi" bu sorunu çözer ve aynı zamanda kopyala-yapıştır için de işe yarar ve bence buradaki uygun çözüm budur (kullanıcı "99 Sorun - Sözdizimi bir değil" aşağıda belirtildiği gibi).
Patrick Finnigan

4
'onkeypres', 'onkeyup' vb., yalnızca metin değişmişse bir işlev çağırmak istediğinde bir çözüm değildir ! Önemli olaylar bu durumda gereksiz bir trafik oluşturur. (Bu yanıtın bir çözüm olarak seçilmesi çok garip, özellikle bu kadar çok oyla! Olumsuz oy vermem, çünkü yanıtları sadece olumsuz oyla vermekten hoşlanmıyorum. Neden (ler) i vermeyi tercih ediyorum Tamam değil - Daha yararlı!)
Apostolos

HTML ≥5 veya jQuery ≥1.7 için, panodan yapıştırmayı da işleyen aşağıda başka çözümler vardır.
user202729

42

Kullanım .on('input'...JQuery 1.7 ve sonraki sürümlerden bir girişte (yapıştırma, anahtarlama vb.) Yapılan her değişikliği izlemek için .

Statik ve dinamik girdiler için:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Yalnızca statik girişler için:

$('.my-class').on('input', function(){
    alert('Input changed');
});

Statik / dinamik örnek içeren JSFiddle: https://jsfiddle.net/op0zqrgy/7/


Bu benim için mükemmel çalıştı - teşekkürler. Başkaları için not - izlemeye 'başlaması' için yukarıdaki kodu onLoad'unuzda veya başka bir şeyde gerçekten çalıştırmayı unutmayın.
Robert Penridge

Yorum yapmak için çok geç ama ... Cevaplayan kullanıcı düz JavaScript gösteriyorsa neden jQuery kullanmanızı öneriyorsunuz?
Andrés Morales

@ AndrésMorales Pek çok uygulamanın anında erişebildiği ve olmayanlara eklemek basit olan ortak bir kitaplıktır. Açıkçası, bu yanıt jQuery kullanamayan (veya kullanmamayı seçen) uygulamalar için geçerli değildir.
rybo111

@ rybo111 Kesinlikle! jQuery ortak bir kitaplıktır ve yaygın olarak kullanılır, ancak beynimde "JavaScript kullanarak iki sayıyı toplayın" hakkındaki meme sorusuna ve bunu yapmak için jQuery'nin kullanılmasıyla ilgili en çok oylanan yanıta bağlanır. Durum böyle değil, ancak çoğu kişi JavaScript ve jQuery'yi ayıramaz.
Andrés Morales

@ AndrésMorales Cevabımın "yapıştırma, tuş ekleme, vb." Bu soruyu yanıtladığımda (7 yıl önce!) JQuery çözümünün kullanışlı olduğunu hatırlıyorum.
rybo111

30

Tuş vuruşlarını kontrol etmek yalnızca kısmi bir çözümdür, çünkü bir giriş alanının içeriğini fare tıklamaları kullanarak değiştirmek mümkündür. Bir metin alanına sağ tıklarsanız, bir tuşa basmadan değeri değiştirmek için kullanabileceğiniz kes ve yapıştır seçeneklerine sahip olursunuz. Benzer şekilde, otomatik tamamlama etkinleştirilmişse, bir alana sol tıklayabilir ve önceden girilen metnin bir açılır menüsünü görüntüleyebilir ve bir fare tıklaması kullanarak seçimleriniz arasından seçim yapabilirsiniz. Tuş bindirme, bu tür değişiklikleri algılamayacaktır.

Ne yazık ki, en azından bildiğim kadarıyla, değişiklikleri rapor eden bir "onchange" olayı yok. Ancak her durumda işe yarayan bir çözüm vardır: setInterval () kullanarak bir zamanlama olayı ayarlayın.

Giriş alanınızın bir kimliği ve "şehir" adı olduğunu varsayalım:

<input type="text" name="city" id="city" />

"Şehir" adında genel bir değişkene sahip olun:

var city = "";

Bunu sayfa başlatma işleminize ekleyin:

setInterval(lookForCityChange, 100);

Ardından bir lookForCityChange () işlevi tanımlayın:

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

Bu örnekte, ihtiyaçlarınıza göre ayarlayabileceğiniz "şehir" değeri her 100 milisaniyede bir kontrol edilmektedir. İsterseniz, lookForCityChange () 'i tanımlamak yerine anonim bir işlev kullanın. Kodunuzun ve hatta tarayıcının giriş alanı için bir başlangıç ​​değeri sağlayabileceğini unutmayın, böylece kullanıcı herhangi bir şey yapmadan önce bir "değişiklik" konusunda bilgilendirilebilirsiniz; kodunuzu gerektiği gibi ayarlayın.

Saniyenin onda birinde bir zamanlama olayının kapanması fikri belirsiz görünüyorsa, zamanlayıcıyı giriş alanı odağı aldığında başlatabilir ve bir bulanıklık olduğunda (clearInterval () ile) sonlandırabilirsiniz. Odağı almadan bir girdi alanının değerini değiştirmenin mümkün olduğunu sanmıyorum, bu nedenle zamanlayıcıyı bu şekilde açıp kapatmak güvenli olmalı.


1
Odaklanmadan bir girdi alanının değerini değiştirmek mümkün değilse ve bir öğe odağı kaybettiğinde bir bulanıklık oluşursa, neden sadece bulanıklıktaki değişiklikleri aramayasınız?
Pakman

Giriş alanı değiştiğinde veya bir değişiklikten sonra odağı kaybettiğinde harekete geçmek istiyor musunuz? Hemen harekete geçmek istiyorsanız, bulanıklığı bekleyemezsiniz.
Dragonfly

@Pakman Bu, bazı durumlarda iyi bir çözüm. Ancak yazarken arama yapmak istiyorsanız - çok güzel bir IMO özelliği (bilgisayar bunu çok daha hızlı ve sıkılmadan yapabiliyorken neden kullanıcı bir şeyler aramalı?) - veya gerçekten başka bir şey metin değiştiğinde gerçekleşmesi gerekiyor, neden bunu yapamayasınız?
Dag

Bu duruma geldiği için çok üzücü.
Chuck Batson

1
@ChuckBatson Bu cevap 2012'den. Yorumunuzu 2016'da yayınladığınızı fark ettim. JQuery kullanıyorsanız cevabımı görün, şimdi inanılmaz derecede kolay.
rybo111

26

HTML5 , oninputtüm doğrudan değişiklikleri yakalamak için bir olay tanımlar . benim için çalışıyor.


1
type = "number" döndürücü kontrolü ile de çalışır (onkeypress ile çalışmaz).
Bob

13

onchange yalnızca giriş öğesindeki değişiklik kullanıcı tarafından yapıldığında oluşur, çoğu zaman bu öğe odağı kaybettiğinde olur.

İşlevinizin, öğe değeri her değiştiğinde etkinleşmesini istiyorsanız, oninputetkinliği kullanmalısınız - bu, değer kullanıcının faresi ile değiştirilebildiğinden, yani yapıştırılabildiğinden veya otomatik doldurulabildiğinden, tuş yukarı / aşağı olaylarından daha iyidir.

Değişiklik olayı hakkında daha fazla bilgiyi buradan okuyun

Giriş olayı hakkında daha fazla bilgiyi buradan okuyun


11

"onchange" yerine aşağıdaki etkinlikleri kullanın

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

6

İlk olarak, ne 'çalışmıyor'? Uyarıyı görmüyor musun?

Ayrıca, kodunuz bu şekilde basitleştirilebilir

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

2

Safari'nin bir metin giriş alanında "onchange" olaylarını tetiklemediği sorunlarla karşılaştım. Bir jQuery 1.7.2 "değiştirme" olayı kullandım ve bu da çalışmadı. ZURB'un metin değiştirme etkinliğini kullanmayı bıraktım. Fare olaylarıyla çalışır ve alandan çıkmadan ateşlenebilir:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

2

IMO'nun önemli olduğuna dair birkaç yorum:

  • Giriş öğeleri, KULLANICI eylemi ENTER'a kadar veya bulanıklık bekleme yapana kadar 'değişim' olayı yaymazsa doğru davranış .

  • Kullanmak istediğiniz olay "input"(" oninput "). İşte ikisi arasındaki fark iyi bir şekilde gösterilmiştir: https://javascript.info/events-change-input

  • İki olay, iki farklı kullanıcı hareketini / anını işaret eder ("giriş" olayı, kullanıcının bir seçim listesi seçeneklerini yazdığı veya gezinmekte olduğu, ancak yine de değişikliği onaylamadığı anlamına gelir. "Değişiklik", kullanıcının değeri değiştirdiği anlamına gelir (giriş veya bulanıklaştırma ile bizim)

  • Burada önerilen birçok önemli olay gibi önemli olayları dinlemek bu durumda kötü bir uygulamadır. (girişlerde ENTER'ın varsayılan davranışını değiştiren kişiler gibi) ...

  • jQuery'nin bununla ilgisi yok. Bunların hepsi HTML standardında.

  • NEDEN bunun doğru davranış olduğunu anlamakta güçlük çekiyorsanız, deney olarak metin düzenleyicinizi veya tarayıcınızı fare / ped olmadan kullanın, sadece bir klavye.

Benim görüşüm.


1

onkeyup benim için çalıştı. geri boşluğa basıldığında onkeypress tetiklenmez.


ne zaman bir değer yapıştırılır? Etkinliği de tetiklemek için "onpaste" kullanıyorum
Louis

1

Kullanımı daha iyidir onchange(event)ile <select>. İle <input>aşağıdaki etkinliği kullanabilirsiniz:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

-3

deneyin onpropertychange. yalnızca IE için çalışır.


6
Neden sadece geliştiricisi tarafından terk edilmiş bir OBSOLETE TARAYICISI'nda çalışan bir mülkü düşünmek istesin ki? Olumsuz oy.
Sod Almighty
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.