Nové výhodné předplatné namísto kreditů je tu! Více informací. Upravili jsme také naše provozní podmínky.
NOVINKA: Staň se datovým analytikem a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:
Avatar
filipfr
Člen
Avatar
filipfr:27.9.2018 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><br>
</form>

díky

 
Odpovědět
27.9.2018 12:56
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27.9.2018 13:50

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

 
Nahoru Odpovědět
27.9.2018 13:50
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27.9.2018 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.9.2018 14:11
Avatar
filipfr
Člen
Avatar
Odpovídá na Peter Mlich
filipfr:27.9.2018 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.9.2018 14:23
Avatar

Člen
Avatar
:28.9.2018 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
28.9.2018 11:09
Avatar

Člen
Avatar
Odpovídá na filipfr
:28.9.2018 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.9.2018 11:33
Avatar
filipfr
Člen
Avatar
Odpovídá na
filipfr:28.9.2018 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.9.2018 11:47
Avatar

Člen
Avatar
Odpovídá na filipfr
:28.9.2018 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í
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
28.9.2018 12:06
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.10.2018 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.10.2018 14:29
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2.10.2018 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.10.2018 14:31
Avatar
lostindream
Člen
Avatar
Odpovídá na filipfr
lostindream:6.10.2018 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.10.2018 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.