亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

ShevaKuilin / 3203人閱讀

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

前言

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

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

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

《動(dòng)手寫個(gè)數(shù)字輸入框3：痛點(diǎn)——輸入法是個(gè)魔鬼》

《動(dòng)手寫個(gè)數(shù)字輸入框4：魔鬼在細(xì)節(jié)——打磨光標(biāo)位置》

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

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

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

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

自動(dòng)的表單驗(yàn)證

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

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

移動(dòng)設(shè)備上當(dāng)它獲得焦點(diǎn)時(shí)，會(huì)出現(xiàn)數(shù)字鍵盤;

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

另外，設(shè)置為any是讓表單驗(yàn)證不受精度限制而已，實(shí)際上步長依然為1。

遺憾了我的哥

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

木有精度精度設(shè)置;

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

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

可以輸入多個(gè)小數(shù)點(diǎn)，如2012.12.12;

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

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

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就沒轍了:-(

總結(jié)

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

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

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

相關(guān)文章

  • 動(dòng)手寫個(gè)數(shù)字輸入框2：起手式——攔截非法字符

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

    microcosm1994 評論0 收藏0

  • 動(dòng)手寫個(gè)數(shù)字輸入框2：起手式——攔截非法字符

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

    233jl 評論0 收藏0

  • 動(dòng)手寫個(gè)數(shù)字輸入框3：痛點(diǎn)——輸入法是個(gè)魔鬼

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

    yy13818512006 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<