Vánoční nadílka Vánoční nadílka
Vánoční akce! Daruj lepší budoucnost blízkým nebo sobě. Až +50 % zdarma na dárkové poukazy. Více informací

Diskuze: načtení hodnoty z inputu a spuštění fce po stisku entru

JavaScript JavaScript načtení hodnoty z inputu a spuštění fce po stisku entru American English version English version

Aktivity (1)
Avatar
filipfr
Člen
Avatar
filipfr:27. září 12:56

Ahoj,
potřebuju po stisku entru načíst hodotu z inputu a spustit fci, které to předám jako argument. Našel jsem řešení, které funguje, ale zdá se mi "hodně přes ruku".

<script>documen­t.getElementBy­Id("code").ad­dEventListener("ke­ydown", function (e) {
let keyCode = e.keyCode;
if (keyCode === 13) {
let code = document.getE­lementById("co­de").value;
save(code);
}
});
</script>

Neexistuje nějaké elegantnější? Zkoušel jsem to i zabalit do <form>, ale to nefungovalo.

<form onsubmit="save({do­cument.getEle­mentById("code")­.value;})">
<h1 class="w3-left-align">Ad. balíky přes PNS</h1>
<input id="code" type="text" class="w3-input w3-round-xlarge" autofocus>

</form>

díky

 
Odpovědět 27. září 12:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27. září 13:50

Vzdyt to mas plne chyb. To ti nemuze pak fungovat.

 
Nahoru Odpovědět 27. září 13:50
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27. září 14:11
<!--form onsubmit="return false;"-->
  <h1 class="w3-left-align">Ad. balíky přes PNS</h1>
  <input id="code" type="text" class="w3-input w3-round-xlarge" value="abcd" autofocus>
<!--/form-->

<script>
function getEl(id) {return document.getElementById(id);}
function save(value) {alert(value)}
function inputKeyDown (event)
        {
alert('1')
        let keyCode = event.keyCode;
        if (keyCode === 13)
                {
alert('3')
                let code = getEl("code").value;
                save(code);
                return false;
                }
alert('2')
        return true;
        }
getEl("code").addEventListener("keydown", inputKeyDown, false);
</script>

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

A elegantme by to slo taky napsat, dat to do onclick k tomu inputu, napr.
S formularem, si ted nejsem jisty, co to udela. Formular se na Enter odesila. Tomu by melo zabranit to return false pri trose stesti.

 
Nahoru Odpovědět 27. září 14:11
Avatar
filipfr
Člen
Avatar
Odpovídá na Peter Mlich
filipfr:27. září 14:23

Ono to takhle funguje, jenom jsem přesvědčen, že musí existovat jednodušší a elegantnější řešení. Já potřebuju ten enter. Bude to nakonec připojené ke čtečce(scanneru). A ta prostě zadá kód a "stiskne" enter. Onclick pro mě nic neřeší.

 
Nahoru Odpovědět 27. září 14:23
Avatar
Vladislav Ladicky:28. září 11:09

Elegantnejšie riešenie ma nenapadá, jedine elegantnejší syntax:

<script>
// watched input element
let input = document.getElementById('code')

// oninput callback
let readInput = e => {
  if (e.keyCode === 13) save(e.target.value)
}

// register input callback
input.addEventListener('keydown', readInput)
</script>
 
Nahoru Odpovědět  +1 28. září 11:09
Avatar
Odpovídá na filipfr
Vladislav Ladicky:28. září 11:33

Jediné elegantnejšie riešenie je použiť Vue a potom by input a skript vyzeral napríklad takto:

<input
  type="text"
  id="code"
  v-model="code"
  @input.enter="save"
>

<script>
new Vue({
  el: '#code',
  data: {
    code: ''
  },
  methods: {
    save () {
      // urob nieco s this.code
    }
  }
})
 
Nahoru Odpovědět 28. září 11:33
Avatar
filipfr
Člen
Avatar
Odpovídá na Vladislav Ladicky
filipfr:28. září 11:47

Díky, já právě myslel, že by nějak mohl fungovat ten <form> s onsubmit, ale nikde jsem takové řešení nenašel. Přijde mi u enteru hloupé, že musím vyhledávat jeho keyCode. Ale i tak díky.

 
Nahoru Odpovědět 28. září 11:47
Avatar
Odpovídá na filipfr
Vladislav Ladicky:28. září 12:06

Ono by to tak šlo urobiť. S tým formulárom. Ale to by bola ďaleko väčšia "prasárna". Preto si aj o tomto nič nevygooglil, lebo to tak nikto nerobí.

Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
 
Nahoru Odpovědět 28. září 12:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2. října 14:29

Ne, tvuj kod fungovat nemohl. Zkousel jsem to zkousel ve FF a ani nahodou.
Elegantnejsi muze byt jen tu udalost volat

<input onkeydown="mykeydown(event)"> nebo
<input onkeydown="mykeydown(this,event)"> a nebo
<input onkeyup="mykeydown(this)"> // this, odesilas tam element input, pak muzes pracovat primo s inputem bez document.getElementById, ale pro tebe je pak pouzitelnejsi onkeyup
onkeyup="if (this.value.substr(-1,1)==\"\n\") {save(this.value);}" // mozna by slo pouzit neco takoveho (ale enter se asi neulozi do value)
... a mozna misto \"\n\" pouzit &quote;\n&quote;, kdyz potrebujes dvojitou uvozovku dat dovnitr dvojite uvozovky v hltml
 
Nahoru Odpovědět 2. října 14:29
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2. října 14:31

Jako, <form onsubmit="return funkce(neco)"> to muzes take zachytavat. Ale tys chtel konkretni input. Treba takovych inputu mas ve formulari vice nez jeden, to v zadani nebylo definovano. Takze jsem to upravil pro ten input.

 
Nahoru Odpovědět 2. října 14:31
Avatar
lostindream
Člen
Avatar
Odpovídá na filipfr
lostindream:6. října 16:40

Tak můžeš zkusit využít funkce onSubmit namísto onClick. Pokud použiješ např. formulář:

<form id="formName">...</form>

vykouzlit něco na způsob:

document.getElementById('formName').addEventListener('submit', function(e){
                e.preventDefault();
                alert('Jupi');
        });
 
Nahoru Odpovědět 6. října 16:40
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 11 zpráv z 11.