Tři vlastnosti vstupního prvku, které jsem objevil při čtení MDN

Nedávno jsem četl Twitter a narazil jsem na tweet od Dana Abramova. Sdílel krátký úryvek kódu, který mě zaujal. Zahrnoval nějaký JavaScript, který přistupoval ke vstupnímu prvku z DOM (Document Object Model) a četl nebo měnil některé jeho vlastnosti. Co mě vzrušovalo a překvapilo, byla vlastnost defaultValue .

Okamžitě jsem otevřel MDN, abych si o této vlastnosti HTTMLInputElements přečetl více a narazil jsem na několik dalších vlastností, o kterých jsem nevěděl, což mě vedlo k napsání tohoto rychlého článku.

Tak jdeme na to!

defaultValue

Toto je Danův příklad Tweetu – pojďme se rychle podívat a předpokládejme, že máte nějaké HTML a dotazujte se na vstupní prvek, který má value atribut (atributy jsou definovány v HTML, zatímco vlastnosti patří objektům JavaScriptu).

<input type="text" value="Hello world">

Nyní můžete tento prvek uchopit a začít si s ním hrát.

const input = document.querySelector('input');

console.log(input.value);        // 'Hello world'

input.value = 'New value';

console.log(input.value);        // 'New value'
console.log(input.defaultValue); // 'Hello world'

Jak vidíte, hodnota definovaná v atributu value se zpočátku odráží ve vlastnosti prvku value . To mi dává celkem smysl. Když nyní změníte value , stále máte přístup k "počáteční hodnotě" pomocí defaultValue (pro zaškrtávací políčka defaultChecked je také k dispozici). Docela cool!

Definice MDN pro defaultValue je následující:

Pokud chcete, můžete si pohrát s kódem v CodePen.

indeterminate

indeterminate nemovitost je fascinující. Věděli jste, že zaškrtávací políčka mohou mít jiný vizuální stav než zaškrtnuté a nezaškrtnuté? indeterminate je vlastnost (neexistuje pro ni žádný atribut), kterou můžete použít k vložení této malé pomlčky do zaškrtávacího políčka, které jste možná tu a tam viděli.

const input = document.querySelector('input');
input.indeterminate = true;

Nastavení indeterminate na true nemá žádný vliv na hodnotu zaškrtávacího políčka a jediný rozumný případ použití, který mě napadá, jsou vnořené zaškrtávací políčko, jak popisuje Chris Coyier na CSSTricks.

indeterminate nefunguje však pouze pro zaškrtávací políčka. Lze jej také použít pro přepínače a prvky postupu. Vezměme si skupinu přepínačů, ve kterých není vybrán žádný přepínač. Když předem nevybíráte jeden prvek ve skupině přepínačů, není vybrán žádný z nich a také žádný z nich není vybrán – všechny jsou tedy v indeterminate stavu.

Skvělé je, že můžete také použít CSS pseudo třídu :indeterminate pseudotřídy k vybraným prvkům, což by se mohlo hodit k zobrazení konkrétních komponent uživatelského rozhraní, když ještě není vybrán žádný přepínač ve skupině.

.msg {
  display: none;
}

input:indeterminate ~ .msg {
  display: block;
}

Co je zajímavé na vlastnosti indeterminate je, že jej můžete nastavit na true nebo false a to ovlivní pseudotřídu pro zaškrtávací políčka, ale ne pro rádia. Pomocí přepínačů je aktuální stav výběru skupiny vždy správný .

A jen to zmínit pro účely dokončení budou prvky pokroku také odpovídat selektoru včetně :indeterminate když nemají value atribut definován.

Definice MDN pro indeterminate je následující:

Pokud chcete, můžete si pohrát s kódem v CodePen.

selectionStart , selectionEnd a selectionDirection

Tyto tři vlastnosti lze použít ke zjištění, co uživatel vybral, a jejich použití je velmi jednoduché. Pokud uživatel vybere text ve vstupním poli, můžete je použít k vyhodnocení toho, co bylo vybráno.

const input = document.querySelector('input');

setInterval( _ => {
  console.log(
    input.selectionStart,
    input.selectionEnd,
    input.selectionDirection;
  ); // e.g. 2, 5, "forward"
}, 1000)

Abych to otestoval, definoval jsem interval, který každou sekundu zaznamenává hodnoty výběru. selectionStart a selectionEnd vrátí čísla popisující pozici mého výběru, ale selectionDirection překvapivě vrací none když vybíráte věci pomocí myši nebo trackpadu, ale forward nebo backward když vyberete text pomocí SHIFT a šipek nebo ovládacích kláves.

Pokud chcete, můžete si pohrát s kódem v CodePen.

A to je vše. :)

Rychlý (a krátký) závěr

MDN je fantastický zdroj. I po použití input prvky již osm let jsou stále nové věci k objevování, a to je to, co na vývoji webu miluji. Osobně se snažím pravidelně číst náhodné články MDN (mám denně Slack-bota, který mi připomíná otevřít bit.ly/randommdn), protože vždy je co objevovat a mohu to jen vřele doporučit!

Děkuji za přečtení! ❤️