Odhalování „hodnoty“ vstupního textového pole po keyDown akci v textovém poli?

hlasů
16

Takže moje místo má vstupní pole, která má OnKeyDown událost, která pouze upozorní hodnotu pole.

Bohužel hodnota vstupu nezahrnuje změny kvůli tomu, že stisknutí tlačítka.

Například pro toto pole:

<input onkeydown=alert(this.value) type=text value=cow />

Výchozí hodnota je „kráva“. Když stisknete tlačítko „S“ na vstupu, dostanete upozornění ( „kravský“) namísto upozornění ( „krávy“). Jak mohu dělat to alert ( „krávy“) bez použití onkeyup ? Nechci používat onkeyup, protože to je méně citlivý.

Dílčím řešením je zjistit stisknuté tlačítko a pak připojit jej na hodnotě vstupního, ale to nefunguje ve všech případech, například pokud máte text ve vstupním zvýrazní a potom stisknutí klávesy.

Každý, kdo má úplné řešení tohoto problému?

dík

Položena 27/08/2009 v 02:55
zdroj uživatelem
V jiných jazycích...                            


7 odpovědí

hlasů
16

Ovladač události vidí pouze se aplikuje obsah před změnou, protože mousedowni inputudálosti vám šanci blokovat akci dříve, než se dostane do této oblasti.

Můžete obejít toto omezení tím, že prohlížeče možnost aktualizovat obsah na poli před popadl svou hodnotu - nejjednodušší způsob, jak je použít malý časový limit před kontrolou hodnotu.

Minimální příkladem je:

<input id="e"
    onkeydown="window.setTimeout( function(){ alert(e.value) }, 1)"
    type="text" value="cow" />

To nastaví 1ms časový limit, který by měl dít po stisknutí a keyDown manipulátory mají nechat ovládání změnit její hodnotu. Je-li váš monitor osvěžující při 60fps pak máte 16ms o manévrovací prostor, než se zpožděním 2 snímky.


Úplnější příklad (který se nespoléhá na pojmenované přístupu na objekt Window by vypadal takto:

var e = document.getElementById('e');
var out = document.getElementById('out');

e.addEventListener('input', function(event) {
  window.setTimeout(function() {
    out.value = event.target.value;
  }, 1);
});
<input type="text" id="e" value="cow">
<input type="text" id="out" readonly>

Při spuštění výše uvedený úryvek, zkuste některé z následujících možností:

  • Umístěte kurzor na začátku a na druhu
  • Vložit nějaký obsah ve středu textového pole
  • Vybrat spoustu textu a zadejte jej nahradit
Odpovězeno 27/08/2009 v 03:04
zdroj uživatelem

hlasů
3

Všimněte si, že v novějších prohlížečích budete moci používat novou HTML5 „vstupní“ událost ( https://developer.mozilla.org/en-US/docs/DOM/window.oninput ) za to. Nejvíce non-IE prohlížeče podporují tuto událost po dlouhou dobu (viz tabulka kompatibility v odkazu); IE je to verze> / 9 pouze bohužel.

Odpovězeno 24/03/2013 v 22:46
zdroj uživatelem

hlasů
0

JQuery je optimální způsob, jak toho dosáhnout. Prosím odkaz níže následující:

let fieldText = $('#id');
let fieldVal = fieldText.val();

fieldText.on('keydown', function() {
   fieldVal.val();
});
Odpovězeno 04/01/2018 v 23:02
zdroj uživatelem

hlasů
0

Prosím, zkuste použít oninput události. Na rozdíl od OnKeyDown , OnKeyPress událostí Tato aktualizace událostí ovládacího prvku hodnota vlastnosti.

<input id="txt1" value="cow" oninput="alert(this.value);" />
Odpovězeno 11/08/2017 v 14:25
zdroj uživatelem

hlasů
0

Zde máte příklad s vysvětlením: http://jsbin.com/awopus/4/edit

Odpovězeno 06/03/2013 v 19:27
zdroj uživatelem

hlasů
0

Pokud je mi známo, můžete to udělat, aby se standardní vstupní kontroly, pokud hodíte svůj vlastní.

Odpovězeno 27/08/2009 v 03:06
zdroj uživatelem

hlasů
0

KeyUp / dolů události jsou řešeny odlišně v různých prohlížečích. Jednoduchým řešením je použití knihovny jako MooTools, který na ně bude chovat stejně, vypořádat se s propagací a bublání, a dá vám standard „to“ na zpětné volání.

Odpovězeno 27/08/2009 v 02:58
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more