Diskuze: načtení hodnoty z inputu a spuštění fce po stisku entru
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
Zobrazeno 11 zpráv z 11.
V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
<!--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/addEventListenerA 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.
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ší.
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>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
}
}
})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.
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í.
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 "e;\n"e;, kdyz potrebujes dvojitou uvozovku dat dovnitr dvojite uvozovky v hltmlJako, <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.
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');
});Zobrazeno 11 zpráv z 11.