完美解決input[type=number]無法顯示非數(shù)字字符的問題
更新時間：2017年02月28日 09:56:23 投稿：jingxian
下面小編就為大家?guī)硪黄昝澜鉀Qinput[type=number]無法顯示非數(shù)字字符的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在移動端webview實現(xiàn)的頁面中，有數(shù)字的地方必須使用input type="number"類型的input，否則觸發(fā)后的鍵盤為全鍵盤，而非數(shù)字鍵盤。但另外的一個問題是，input 為 type="number" 類型的無法顯示非數(shù)字字符，比如：12/23中/。
只能采取另外的思路來解決，比如：顯示的時候用非number類型的input或其它元素，當(dāng)觸發(fā)onfocus后，利用js 動態(tài)修改為number類型。
<input class="pg-page-num" type="text" name="" value="34/233" id="pageNum">
<input type="hidden" name="" value="25" id="totalPage">
<script type="text/javascript">
var oPage = document.querySelector('#pageNum'),
oTotal = document.querySelector('#totalPage'),
sOldVal = '';
oPage.addEventListener('focus', function () {
this.type = 'number';
sOldVal = this.value;
}, false);
oPage.addEventListener('blur', function () {
var sVal = this.value;
this.type = 'text';
if (sVal != sOldVal) {
this.value += '/' + oTotal.value;
}
}, false);
</script>
以上這篇完美解決input[type=number]無法顯示非數(shù)字字符的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
js中的document.querySelector()方法舉例詳解
這篇文章主要給大家介紹了關(guān)于js中document.querySelector()方法的相關(guān)資料,document.querySelector是JavaScript中的一個內(nèi)置方法,用于通過CSS選擇器選擇文檔中的第一個匹配元素,需要的朋友可以參考下2024-01-01
數(shù)獨（すうどく，Sūdoku）是一種運用紙、筆進(jìn)行演算的邏輯游戲。玩家需要根據(jù)9×9盤面上的已知數(shù)字，推理出所有剩余空格的數(shù)字，并滿足每一行、每一列、每一個粗線宮內(nèi)的數(shù)字均含1-9，不重復(fù)。2015-03-03
JS日期對象簡單操作（獲取當(dāng)前年份、星期、時間）
這篇文章主要介紹了JS日期對象簡單操作,獲取當(dāng)前年份、星期、時間等代碼,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
JS+CSS實現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果
這篇文章主要介紹了JS+CSS實現(xiàn)六級網(wǎng)站導(dǎo)航主菜單效果,涉及JavaScript遍歷頁面元素及動態(tài)修改css屬性的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標(biāo)簽滾動定位到對應(yīng)位置
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊導(dǎo)航標(biāo)簽滾動定位到對應(yīng)位置，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了JavaScript數(shù)組常用操作技巧,以實例形式匯總了針對數(shù)組的查找、連接、排序及迭代等各種常見操作技巧,非常具有實用價值,需要的朋友可以參考下2014-11-11
Bootstrap優(yōu)化站點資源、響應(yīng)式圖片、傳送帶使用詳解3
這篇文章主要介紹了Bootstrap優(yōu)化站點資源、完成響應(yīng)式圖片、讓傳送帶支持手勢的相關(guān)知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了JavaScript中的迭代器和生成器詳解,本文講解了迭代器、聲明自定義迭代器、生成器：一種更好的方式來構(gòu)建迭代器、生成器高級特性等內(nèi)容,需要的朋友可以參考下2014-10-10
如何在uniapp中獲取可視區(qū)域的高度(uni.getSystemInfo)
這篇文章主要給大家介紹了關(guān)于如何在uniapp中獲取可視區(qū)域的高度(uni.getSystemInfo)的相關(guān)資料,文中通過圖文以及實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用uniapp具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-04-04
微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴栵@示功能的處理方法
大家都知道在canvas中沒有提供方法來處理文字的多行問題，只有通過截取指定字符串來達(dá)到目的。接下來通過本文給大家介紹微信小程序中的canvas 文字?jǐn)嘈泻褪÷蕴栵@示功能 ,需要的朋友可以參考下2018-11-11