2014-07-24 149 views
3

只要輸入類型=文本,我的代碼就可以正常使用此插件,但我想使用type = number,因此正確的鍵盤顯示在移動設備上。如何使jquery.inputmask與輸入類型=數字一起工作?

有沒有辦法做到這一點,希望有一些設置,我錯過了文檔?

這裏是我的html:

<input id="Price" name="Price" type="number" placeholder="0.00" tabindex="3"/> 

這裏是我的JS:

$(document).ready(function(){ 
    $('#Price').inputmask("[9][9]9.99", { 
     numericInput: true, 
     "placeholder": "0", 
     showMaskOnHover: false, 
     greedy: false 
    }); 
}); 
+0

如果插件做任何事情閱讀或設置光標位置或選擇/插入文本,你肯定會遇到問題在Chrome上,因爲他們所做的更改。看到這個問題:http://stackoverflow.com/questions/22381837/how-to-overcome-whatwg-w3c-chrome-version-33-0-1750-146-regression-bug-with-i – scunliffe

+1

@scunliffe謝謝你指着我在正確的方向。我將立即將輸入更改爲文本,然後等待查看光標位置問題是否在chrome中解決。 – Nathaniel

回答

5

jQuery的輸入掩碼插件(http://plugins.jquery.com/jquery.inputmask/)使用setSelectionRangeselectionStartselectionEnd(在https://github.com/RobinHerbots/jquery.inputmask/blob/3.x/js/jquery.inputmask-multi.js)。當它們更新爲符合W3C更改時,這些屬性/方法已被放置在<input type="number"/>字段in Chrome上。

如果你覺得W3C的變化,以消除一些領域,這些功能是錯誤的,請投票支持Bugzilla bug #24796

some hacks要解決這個問題,或者您可能需要訴諸使用<input type="text">

+0

inputmask插件似乎不支持任何瀏覽器中輸入的數字。我已經在FF,IE,Opera和Chrome的最新版本中測試了我的代碼,但只有在類型設置爲文本的情況下才有效。其他瀏覽器在數字字段上具有相同的功能嗎? – Nathaniel

1

我發現使用<input type="tel" />可以在手機上輸入數字,並且還允許所有相同的事件作爲type="text"觸發!

Seems to be compatible with most modern browsers, with a fallback to "text" when not compatible.

瀏覽器沒有對這些類型的支持將回落到使用 「文本」類型。

http://www.caniuse.com/#search=tel

希望這可以幫助其他人。

0

我的解決方法是在input type =「text」中添加pattern =「[0-9] *」,或者如果它不起作用,請使用input type =「tel」 - 允許手機上的數字輸入

相關問題