文章加密

;

2018年11月21日 星期三

input type="number",input list="XXX"搭配 datalist id="XXX"(父), option各種選項(子)

使用input type="number"

  1. 会自动验证你输入的文本是否为数字
  2. 可以搭配placeholder="multiple of 10" step="10" min="0" max="100" value="10"(有placeholder就不要有value,二選一)(placeholder被稱為占位符)
  3. 移动浏览器通过在用户尝试输入值时显示更适合输入数字的特殊键盘,进一步帮助用户体验。
  4. 如果輸入的不適規範的數值,瀏覽器會顯示錯誤訊息給使用者(錯誤訊息例如:請輸入有效值。最接近的兩個有效值分別是30和40)

其中step設10,在手動輸入15,雖然畫面顯示上是可以,但其實是無效的。
如果要小數把step設小數即可,如step="0.01"。
调整输入框的宽度为仅可输入3位数字的宽度,在css添加width: 3em;
datalist id="XXX"(父), option各種選項(子),類似select option,但在選定某一個option後,要改選項須先鍵盤delete原本的值,想像一下似乎datalist適合用在移動端(但真的需要嗎?再觀察),不適合用在電腦端。
添加required則該input傳送資料時不能為空值
再css裡可以用input:invalid, :valid, and :required 選擇元素

沒有留言:

張貼留言