script 語法:讓網頁欄位只能輸入數字?英文?中文?

讓網頁的欄內位僅能輸入數字 (使用 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>
笨兔隨手筆記於 2017/09/19

喵喵笨兔 の 喵喵的家~遊戲天地
http://vv0817.tk
http://vvv.lionfree.net
http://qo3op.asuscomm.com/vvv
https://uoedgpkhyfwzmd7zua8myg-on.drv.tw/vvv