讓網頁的欄內位僅能輸入數字 (使用 jQuery 語法)
讓欄位只能輸入數字和一個小數點,輸入其它則會即時清除或無法顯示。網上找來的,供參考之!
(1) 引入 jquery-1.12.4.min.js。
Bootstrap 主站及下載:https://getbootstrap.com/
本小站下載:
含 Bootstrap 3.3.7 ~ 4.3.1 & jQuery 1.11.3 ~ 3.4.1
(2) 在<head>......</head> 間加入以下的 script 語法。
(3) 在要輸入的欄位加入 onkeyup 語法即可!^ ^
範例:主要看紅色字部份
,或直接複製所有程式碼,另存成一個 html 檔來觀看唄 ^^
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - script 語法:讓網頁欄位只能輸入數字</title> <script src="js/jquery-1.12.4.min.js"></script> <script>
function keynum(e, pnumber){
if (!/^\d+[.]?\d*$/.test(pnumber)){
$(e).val(/^\d+[.]?\d*/.exec($(e).val()));
}
return false;
}
</script>
</head> <body> <input type="text" style="ime-mode:disabled" onkeyup="return keynum($(this),value)" /> PS:style="ime-mode:disabled" 是把輸入切模式關掉,要不要設都可以。 </body> </html>
範例結果: 輸入看看,只能輸入數字和一個小數點 ^^ |
讓網頁的欄內位僅能輸入數字 (純 javascript 語法)
(1) 只能輸入數字,不能輸入小數點,也就是只能輸入正整數
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - script 語法:讓網頁欄位只能輸入數字</title> <script>
function keynum1(e, pnumber)
{
if (!/^\d+$/.test(pnumber))
{
e.value = /^\d+/.exec(e.value);
}
return false;
}
</script>
</head> <body> <input type="text" style="ime-mode:disabled" onkeyup="return keynum1(this,value)" /> PS:style="ime-mode:disabled" 是把輸入切模式關掉,要不要設都可以。 </body> </html>
範例結果: 輸入看看,只能輸入數字,不能輸入小數點 ^^ |
(2) 只能輸入數字和一個小數點
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - script 語法:讓網頁欄位只能輸入數字</title> <script>
function keynum2(e, pnumber)
{
if (!/^\d+[.]?\d*$/.test(pnumber))
{
e.value = /^\d+[.]?\d*/.exec(e.value);
}
return false;
}
</script>
</head> <body> <input type="text" style="ime-mode:disabled" onkeyup="return keynum2(this,value)" /> PS:style="ime-mode:disabled" 是把輸入切模式關掉,要不要設都可以。 </body> </html>
範例結果: 輸入看看,只能輸入數字和一個小數點 ^^ |
(3) 只能輸入數字和一個小數點,及限制只能到小數點後1位
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>喵喵笨兔 の 喵喵的家~遊戲天地 - script 語法:讓網頁欄位只能輸入數字</title> <script>
function keynum3(e, pnumber)
{
if (!/^\d+[.]?[1-9]?$/.test(pnumber))
{
e.value = /\d+[.]?[1-9]?/.exec(e.value);
}
return false;
}
</script>
</head> <body> <input type="text" style="ime-mode:disabled" onkeyup="return keynum3(this,value)" /> PS:style="ime-mode:disabled" 是把輸入切模式關掉,要不要設都可以。 </body> </html>
範例結果: 輸入看看,只能輸入數字和一個小數點及限制小數後一位 ^^ |
(4) 判斷是否輸入中文字 (以字串來判定)
strlen (字串) :計算字串的長度,中文1字=3byte,其它=1byte。
mb_strlen (字串,"編碼"):以編碼計算字串的長度,中文1字=1byte,其它=1byte。(中文編碼可用萬國碼 utf-8 或 Big-5)
<?php echo strlen("天空A"); //得到的數值是7 echo mb_strlen("天空A","utf-8"); //得到的數值是3
?>
<?PHP
if (mb_strlen($str,"utf-8") == strlen($str)){
echo "不是中文";
}else{ echo "此字串有中文";
} ?>
若 $str='123" 則換算後是 3=3,所以得到【不是中文】
若 $str='大1" 則換算後是 2<>4,所以得到【此字串有中文】
其它網上找來的,有與趣就自行參考唄!^^
只能輸入數字最快方法: (1) 強制將非數字去除 <input type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')"> (2) 強制不允許非數字輸入 <input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'> 1.只能輸入數字和英文的:
<input onkeyup="value=value.replace(/[\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
ID="Text1" NAME="Text1">
2.只能輸入數字的:
<input onkeyup="value=value.replace(/[^\d]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
ID="Text2" NAME="Text2">
3.只能輸入全角的:
<input onkeyup="value=value.replace(/[^\?-\?]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\?-\?]/g,''))"
ID="Text3" NAME="Text3">
4.只能輸入漢字的:
<input onkeyup="value=value.replace(/[^\一-\龥]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\一-\龥]/g,''))"
ID="Text4" NAME="Text4">
5.郵件地址驗證:
var regu =
"^(([0-9a-zA-Z]+)|([0-9a-zA-Z]+[_.0-9a-zA-Z-]*[0-9a-zA-Z]+))@([a-zA-Z0-9-]+[.])+([a-zA-Z]{2}|net|NET|com|COM|gov|GOV|mil|MIL|org|ORG|edu|EDU|int|INT)$"
var re = new RegExp(regu);
if (s.search(re) != -1) {
return true;
} else {
window.alert ("請輸入有效合法的E-mail地址 !")
return false;
}
6.身份證:
"^\\d{17}(\\d|x)$"
7.17種正則表達式
"^\\d+$"//非負整數(正整數 + 0)
"^[0-9]*[1-9][0-9]*$"//正整數
"^((-\\d+)|(0+))$"//非正整數(負整數 + 0)
"^-[0-9]*[1-9][0-9]*$"//負整數
"^-?\\d+$"//整數
"^\\d+(\\.\\d+)?$"//非負浮點數(正浮點數 + 0)
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"//正浮點數
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"//非正浮點數(負浮點數 + 0)
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"//負浮點數
"^(-?\\d+)(\\.\\d+)?$"//浮點數
"^[A-Za-z]+$"//由26個英文字母組成的字符串
"^[A-Z]+$"//由26個英文字母的大寫組成的字符串
"^[a-z]+$"//由26個英文字母的小寫組成的字符串
"^[A-Za-z0-9]+$"//由數字和26個英文字母組成的字符串
"^\\w+$"//由數字、26個英文字母或者下劃線組成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"//email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"//url
=============================================
1.取消按鈕按下時的虛線框
在input裏添加屬性值 hideFocus 或者 HideFocus=true
2.只讀文本框內容
在input裏添加屬性值 readonly
3.防止退後清空的TEXT文檔(可把style內容做做爲類引用)
<INPUT style=behavior:url(#default#savehistory); type=text
id=oPersistInput>
4.ENTER鍵可以讓光標移到下一個輸入框
<input onkeydown="if(event.keyCode==13)event.keyCode=9" >
5.只能爲中文(有閃動)
<input onkeyup="value="/value.replace(/[" -~]/g,’’)"
onkeydown="if(event.keyCode==13)event.keyCode=9">
6.只能爲數字(有閃動)
<input onkeyup="value="/value.replace(/["^\d]/g,’’)
"onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))">
7.只能爲數字(無閃動)
<input ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9" onKeyPRess="if
((event.keyCode<48 || event.keyCode>57)) event.returnValue=false">
8.只能輸入英文和數字(有閃動)
<input onkeyup="value="/value.replace(/[\W]/g,"’’)"
onbeforepaste="clipboardData.setData(’text’,clipboardData.getData(’text’).replace(/[^\d]/g,’’))">
9.屏蔽輸入法
<input type="text" name="url" ime-mode:disabled"
onkeydown="if(event.keyCode==13)event.keyCode=9">
10. 只能輸入 數字,小數點,減號(-) 字符(無閃動)
<input onKeyPress="if (event.keyCode!=46 && event.keyCode!=45 &&
(event.keyCode<48 || event.keyCode>57)) event.returnValue=false">
11. 只能輸入兩位小數,三位小數(有閃動)
<input maxlength=9
onkeyup="if(value.match(/^\d{3}$/))value="/value.replace(value,parseInt(value/10))"
;value="/value.replace(/\.\d*\./g,’."’)" onKeyPress="if((event.keyCode<48
|| event.keyCode>57) && event.keyCode!=46 && event.keyCode!=45 ||
value.match(/^\d{3}$/) || /\.\d{3}$/.test(value))
{event.returnValue=false}" id=text_kfxe name=text_kfxe>