完美解決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或其它元素，當觸發(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)文章
這篇文章主要介紹了JavaScript獲取URL參數(shù)的方法分享，主要包括字符串?split?方法、?URLSearchParams?方法、正則匹配方法等，具有一定的參考價值需要的小伙伴可以參考一下2022-04-04
js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS實現(xiàn)DOM刪除節(jié)點操作,結(jié)合實例形式分析了javascript使用removeChild()操作頁面dom節(jié)點刪除功能的相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
利用Echarts如何實現(xiàn)多段圓環(huán)圖
這篇文章主要給大家介紹了關(guān)于利用Echarts如何實現(xiàn)多段圓環(huán)圖的相關(guān)資料,文中通過實例代碼代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了不容錯過的兩款Bootstrap Icon圖標選擇組件，支持自定義的圖標，拿出來分享下，絕對的干貨，感興趣的小伙伴們可以參考一下2016-01-01
詳解JavaScript中Math內(nèi)置對象基本方法的使用
Math?是javaScript的內(nèi)置對象，包含了部分數(shù)學常數(shù)屬性和數(shù)學函數(shù)方法。本文將詳細講解Math基本方法的使用，感興趣的小伙伴可以學習一下2022-04-04
html+css+js實現(xiàn)簡易版ChatGPT聊天機器人
OpenAI的一款聊天機器人模型ChatGPT爆火，本篇文章用一百行html+css+js代碼給大家制作一款簡易的聊天機器人。2023-02-02
這篇文章主要介紹了JavaScript中的比較操作符>、<、>=、<=介紹,本文先是講解了操作符的一些使用規(guī)則,然后給出了操作實例,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了CocosCreator實現(xiàn)技能冷卻效果，同學們可以跟著教程，親手試一下，代碼都是可以復(fù)用的2021-04-04
本文通過兩種方法給大家介紹vue-cli+es6引入es5寫的js，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2019-04-04