3 propriedades em elementos input que descobri lendo o MDN

Recursos que só lendo a documentação nós descobrimos!

Image for post
Image for post

⭐️ Créditos

Propriedade “defaultValue”

Como no tweet do Dan, vamos assumir que temos um trecho HTML e buscar um elemento input que tenha o atributo value (atributos são definidos no HTML, enquanto as propriedades pertencem a objetos JavaScript), como:

<input type="text" value="Hello world">
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'

Propriedade “indeterminate”

A propriedade indeterminate é fascinante para mim. Você sabia que checkboxes podem ter um estado visual adicional, fora checked e not checked? É a propriedade indeterminate (não há um atributo para isso) que você pode usar para colocar um pequeno traço dentro do checkbox, acredito que você já tenha visto isso uma vez ou outra:

const input = document.querySelector('input');
input.indeterminate = true;
Image for post
Image for post
Image for post
Image for post
.msg {
display: none;
}

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

Propriedades “selectionStart”, “selectionEnd” e “selectionDirection”

Essas três propriedades podem ser usadas para descobrir o que um usuário selecionou e elas são muito fáceis de usar. Se o usuário selecionar o texto em um input, você poderá usá-las para avaliar o que foi selecionado.

Image for post
Image for post
const input = document.querySelector('input');

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

Rápida, e pequena, conclusão

O MDN é um recurso fantástico. Mesmo depois de usar elementos input há oito anos, sempre há coisas novas para descobrir, e é isso que eu adoro no desenvolvimento web.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store