完美解決input[type=number]無(wú)法顯示非數(shù)字字符的問(wèn)題
更新時(shí)間：2017年02月28日 09:56:23 投稿：jingxian
下面小編就為大家?guī)?lái)一篇完美解決input[type=number]無(wú)法顯示非數(shù)字字符的問(wèn)題。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在移動(dòng)端webview實(shí)現(xiàn)的頁(yè)面中，有數(shù)字的地方必須使用input type="number"類型的input，否則觸發(fā)后的鍵盤(pán)為全鍵盤(pán)，而非數(shù)字鍵盤(pán)。但另外的一個(gè)問(wèn)題是，input 為 type="number" 類型的無(wú)法顯示非數(shù)字字符，比如：12/23中/。
只能采取另外的思路來(lái)解決，比如：顯示的時(shí)候用非number類型的input或其它元素，當(dāng)觸發(fā)onfocus后，利用js 動(dòng)態(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]無(wú)法顯示非數(shù)字字符的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了JavaScript獲取URL參數(shù)的方法分享，主要包括字符串?split?方法、?URLSearchParams?方法、正則匹配方法等，具有一定的參考價(jià)值需要的小伙伴可以參考一下2022-04-04
js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js判斷radiobuttonlist的選中值顯示/隱藏其它模塊的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)DOM刪除節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了javascript使用removeChild()操作頁(yè)面dom節(jié)點(diǎn)刪除功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04
利用Echarts如何實(shí)現(xiàn)多段圓環(huán)圖
這篇文章主要給大家介紹了關(guān)于利用Echarts如何實(shí)現(xiàn)多段圓環(huán)圖的相關(guān)資料,文中通過(guò)實(shí)例代碼代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
很不錯(cuò)的兩款Bootstrap Icon圖標(biāo)選擇組件
這篇文章主要介紹了不容錯(cuò)過(guò)的兩款Bootstrap Icon圖標(biāo)選擇組件，支持自定義的圖標(biāo)，拿出來(lái)分享下，絕對(duì)的干貨，感興趣的小伙伴們可以參考一下2016-01-01
詳解JavaScript中Math內(nèi)置對(duì)象基本方法的使用
Math?是javaScript的內(nèi)置對(duì)象，包含了部分?jǐn)?shù)學(xué)常數(shù)屬性和數(shù)學(xué)函數(shù)方法。本文將詳細(xì)講解Math基本方法的使用，感興趣的小伙伴可以學(xué)習(xí)一下2022-04-04
html+css+js實(shí)現(xiàn)簡(jiǎn)易版ChatGPT聊天機(jī)器人
OpenAI的一款聊天機(jī)器人模型ChatGPT爆火，本篇文章用一百行html+css+js代碼給大家制作一款簡(jiǎn)易的聊天機(jī)器人。2023-02-02
這篇文章主要介紹了JavaScript中的比較操作符>、<、>=、<=介紹,本文先是講解了操作符的一些使用規(guī)則,然后給出了操作實(shí)例,需要的朋友可以參考下2014-12-12
CocosCreator實(shí)現(xiàn)技能冷卻效果
這篇文章主要介紹了CocosCreator實(shí)現(xiàn)技能冷卻效果，同學(xué)們可以跟著教程，親手試一下，代碼都是可以復(fù)用的2021-04-04
詳解vue-cli+es6引入es5寫(xiě)的js(兩種方法)
本文通過(guò)兩種方法給大家介紹vue-cli+es6引入es5寫(xiě)的js，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-04-04