HTML Input Element in depth All In One

HTML Input Element in depth All In One

value
string: Returns / Sets the current value of the control. If the user enters a value different from the value expected, this may return an empty string.

valueAsDate
Date: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.

valueAsNumber
double: Returns the value of the element, interpreted as one of the following, in order: A time value, a number or NaN if conversion is impossible

<input type="number" id="input1" value='1'> 
<button id="btn1">valueAsNumber</button>

<input type="date" id="input2" value="2020-12-03">
<button id="btn2">valueAsDate</button>

const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');

const btn1 = document.querySelector('#btn1');
const btn2 = document.querySelector('#btn2');

const app = document.querySelector('#app');

btn1.addEventListener('click', () => {
  if(typeof clear === 'function') {
    clear();
  }
  console.log('\ninput1', input1.value, typeof input1.value);
  console.log('input1.valueAsNumber =', input1.valueAsNumber, typeof input1.valueAsNumber);
  app.innerHTML = `
     input1.value = ${input1.value}, <br>
     typeof input1.value = ${typeof input1.value};<br>
     input1.valueAsNumber = ${input1.valueAsNumber}, <br>
     typeof input1.valueAsNumber = ${typeof input1.valueAsNumber};<br>
  `;
});

btn2.addEventListener('click', () => {
  if(typeof clear === 'function') {
    clear();
  }
  console.log('\ninput2', input2.value, typeof input2.value);
  console.log('input2.valueAsDate =', input2.valueAsDate, typeof input2.valueAsDate);
  app.innerHTML = `
     input2.value = ${input2.value}, <br>
     typeof input2.value = ${typeof input2.value};<br>
     input2.valueAsNumber = ${input2.valueAsDate}, <br>
     typeof input2.valueAsDate = ${typeof input2.valueAsDate};<br>
  `;
});

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

refs

https://twitter.com/Steve8708/status/1509653389453324299

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---