動手寫個數(shù)字輸入框1：input[type=number]的遺憾

ShevaKuilin 發(fā)布于2019-08-20 16:54 / 3145人閱讀

摘要：前言最近在用封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不少坑，也有很多值得研究的地方。的值除了影響微調(diào)按鈕的步長外，還影響表單驗證信息。

前言

?最近在用Polymer封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不少坑，也有很多值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經(jīng)歷：

《動手寫個數(shù)字輸入框1：input[type=number]的遺憾》

《動手寫個數(shù)字輸入框2：起手式——攔截非法字符》

《動手寫個數(shù)字輸入框3：痛點——輸入法是個魔鬼》

《動手寫個數(shù)字輸入框4：魔鬼在細節(jié)——打磨光標位置》

HTML5帶來的福利-input[type=number]

?input[type=number]為我們提供了如下特性：

限制只能輸入[+-0-9.]這幾個字符

輸入法(IME)也無法輸入非[+-0-9.]的字符

自動的表單驗證

min和max來限制數(shù)值的下限和上限;

提供stepUp和stepDown兩個方法實現(xiàn)以編程方式控制數(shù)值的增加和減少;

移動設備上當它獲得焦點時，會出現(xiàn)數(shù)字鍵盤;

step設置點擊右側(cè)微調(diào)按鈕的步長(默認為1)，可設置為小數(shù)、整數(shù)或any。step的值除了影響微調(diào)按鈕的步長外，還影響表單驗證信息。

另外，設置為any是讓表單驗證不受精度限制而已，實際上步長依然為1。

遺憾了我的哥

?到這里我想大家都會發(fā)現(xiàn)怎么少了個精度設置呢？確實，input[type=number]并沒有為我們提供設置精度的屬性或方法。但遺憾的何止是這個呢？

木有精度精度設置;

不想要右側(cè)的微調(diào)按鈕還不行了...

點擊微調(diào)按鈕和調(diào)用stepUp和stepDown設置數(shù)值確實被限制在min和max區(qū)間，但直接輸入?yún)s不受限制...

可以輸入多個小數(shù)點，如2012.12.12;

設置step=any后，chrome on android的數(shù)字鍵盤居然沒了小數(shù)點按鍵。

設置step=any后，點擊微調(diào)按鈕步長為1，但調(diào)用stepUp和stepDown則報

Uncaught DOMException: Failed to execute "stepUp" on "HTMLInputElement": This form element does not have an allowed value step.

隱藏右側(cè)微調(diào)按鈕不完全解決方法

Webkit和Gecko下可通過以下的CSS來隱藏右側(cè)微調(diào)按鈕

/* chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance: none!important;
    margin: 0;
}
/* Firefox */
input[type=number]{
    -moz-appearance: textfield;
}

IE就沒轍了:-(

總結

?也許你會問既然HTML5愿意為我們新增一個全新的input[type=number]，為什么偏偏提供一個缺胳膊少腿的呢？只能說得哥情時失嫂意，既然它不滿足，那就自己寫寫看咯:)
尊重原創(chuàng)，轉(zhuǎn)載請注明來自：http://www.cnblogs.com/fsjohn... ^_^肥仔John

云服務器 GPU云服務器 js正則input輸入框數(shù)字輸入框文本框輸入數(shù)字 jquery_input_type

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83250.html

動手寫個數(shù)字輸入框2：起手式——攔截非法字符

摘要：前言最近在用封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不是坑，也有不少值得研究的地方。因此我們要繼續(xù)補充下面兩步，并且由于事件觸發(fā)時值還沒被修改，于是我們需要將值和當前輸入值做組合來做預判，進一步擴大非法字符集。前言 ?最近在用Polymer封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不是坑，也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經(jīng)歷：《動手寫個數(shù)字輸入框1：input[...

microcosm1994 2019-08-21 15:52 評論0 收藏0
動手寫個數(shù)字輸入框2：起手式——攔截非法字符

摘要：前言最近在用封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不是坑，也有不少值得研究的地方。因此我們要繼續(xù)補充下面兩步，并且由于事件觸發(fā)時值還沒被修改，于是我們需要將值和當前輸入值做組合來做預判，進一步擴大非法字符集。前言 ?最近在用Polymer封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不是坑，也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經(jīng)歷：《動手寫個數(shù)字輸入框1：input[...

233jl 2019-08-01 16:56 評論0 收藏0
動手寫個數(shù)字輸入框3：痛點——輸入法是個魔鬼

摘要：前言最近在用封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不是坑，也有不少值得研究的地方。因此我們能做的是通過事件作事后補救措施在中攔截輸入法中輸入的和按鍵事件，然后自行出發(fā)事件執(zhí)行補救措施。前言 ?最近在用Polymer封裝純數(shù)字的輸入框，開發(fā)過程中發(fā)現(xiàn)不是坑，也有不少值得研究的地方。本系列打算分4篇來敘述這段可歌可泣的踩坑經(jīng)歷： [《動手寫個數(shù)字輸入框1：input[type=number...

yy13818512006 2019-08-20 17:04 評論0 收藏0