Input and Web API
Some <input /> expose some interesting web api for developers for vivid usage.
JavaScript & Methods
<script>
// input[type=color]
const inputColor = document.querySelector('input[type=color]');
inputColor.showPicker();
// EyeDropper
document.querySelector('.button--eyedropper')
.addEventListener('click',
async () => {
const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
const colorHexValue = result.sRGBHex;
}
);
// input[type=datetime-local]
const inputDatetime = document.querySelector('input[type="datetime-local"]');
inputDatetime.showPicker();
// input[type=number]
const inputNumber = document.querySelector('input[type=number]');
document.querySelector('.button--plus')
.addEventListener('click',
() => {
inputNumber.stepUp();
}
);
document.querySelector('.button--minus')
.addEventListener('click',
() => {
inputNumber.stepDown();
}
);
// input and select()
const inputSelectContent = document.querySelector('.input--selectContent');
inputSelectContent.select();
</script>