『JavaScript』如何限制 Input 只...-jQuery的插件开发的动态仪表板...-css样式在IE各浏览器兼容问题

当前位置: 编程技术>WEB前端

本页文章导读:

▪『JavaScript』如何限制 Input 只能输入数字這玩意很多人寫過，但是今天臨時要用的時候找不到符合需求的，所以立馬來寫一個，既然都寫完了而且還滿符合需求的就放上來讓大家鞭一鞭。需求很簡單，一個文字方塊必須限制只能輸入.........

▪jQuery的插件开发的动态仪表板效果日期：2013-3-23 来源：GBin1.com 在线演示还记得我们使用HTML5实现的动态仪表盘吗？今天介绍一款来自Larentis Mattia设计的jQuery动态仪表盘设计，可以自由的设置参数。 via 极客标签 .........

▪css样式在IE各浏览器兼容问题 css仅IE8识别： margin-left:10px\0; cssIE6/IE7识别： *margin-left:10px; css仅IE6识别 : _margin-left:10px;IE6及IE6以下识别 * html {…} opera、safari、chrome识别： @media all and (min-width: 0px){…} //Firefox3.0.6不识.........

[1]『JavaScript』如何限制 Input 只能输入数字

来源: 发布时间: 2013-11-19

這玩意很多人寫過，但是今天臨時要用的時候找不到符合需求的，所以立馬來寫一個，既然都寫完了而且還滿符合需求的就放上來讓大家鞭一鞭。

需求很簡單，一個文字方塊必須限制只能輸入數字（或是小數點）並且要支援 IE 和 Firefox。

HTML的 Input 是這樣下滴

1 <input type="text" onkeyup="return ValidateNumber($(this),value)" />

其中那個 Style 是在 IE 瀏覽器下有效用的，可以讓使用者無法在這文字方塊內使用輸入法。
而onkeyup 則是我們自己撰寫的 js 啦，完整的 Code 在下面。

驗證只能輸入數字

function ValidateNumber(e, pnumber){

if (!/^\d+$/.test(pnumber)){

$(e).val(/^\d+/.exec($(e).val()));

}

return false;

}

demo 是利用 Regex 來將不屬於數字的過濾掉。

實務上經常需要驗證的是有小數點的欄位，網路上搜尋到的一堆是可以輸入「1.2.3456」的這種詭異值，其實只要小改一下 Regex 就可以驗證了。

function ValidateFloat(e, pnumber){

if (!/^\d+[.]?\d*$/.test(pnumber)){

$(e).val(/^\d+[.]?\d*/.exec($(e).val()));

}

return false;

}

這樣子就可以輸入整數也可以輸入一個小數點

以上就給有需要的朋友使用啦。

因為有網友說這種玩意兒不需要動用到 jQuery 的確，是不用動用到所以來寫一下純 javascript 的版本

HTML要有所改變

只能輸入數字（純 javascript)

function ValidateNumber(e, pnumber){

if (!/^\d+$/.test(pnumber)){

e.value = /^\d+/.exec(e.value);}

return false;

}

可以輸入小數（純 javascript)

function ValidateNumber(e, pnumber)
{
if (!/^\d+[.]?\d*$/.test(pnumber))
{
e.value = /^\d+[.]?\d*/.exec(e.value);
}
return false;
}

有網友說他想要限制只有小數點後一位就好，因此再來小改一下其實重點只有RegExp要改而已

function ValidateFloat2(e, pnumber)
{
if (!/^\d+[.]?[1-9]?$/.test(pnumber))
{
e.value = /\d+[.]?[1-9]?/.exec(e.value);
}
return false;
}

如果你是用萬惡的IE那當你一開始就輸入非數字的時候就會送你一個討厭的null因此又要改寫成這樣過濾掉

if (!/^\d+$/.test(pnumber))
{
var newValue = /^\d+/.exec(e.value);
if (newValue != null)
{
e.value = newValue;
}
else
{
e.value = "";
}
}
return false;

本文链接

[2]jQuery的插件开发的动态仪表板效果

来源: 互联网发布时间: 2013-11-19

日期：2013-3-23 来源：GBin1.com

在线演示

还记得我们使用HTML5实现的动态仪表盘吗？

今天介绍一款来自Larentis Mattia设计的jQuery动态仪表盘设计，可以自由的设置参数。

via 极客标签

来源：jQuery的插件开发的动态仪表板效果

作者：jjfat 发表于2013-3-26 13:58:54 原文链接

阅读：0 评论：0 查看评论

[3]css样式在IE各浏览器兼容问题

来源: 发布时间: 2013-11-19

css仅IE8识别： margin-left:10px\0;

cssIE6/IE7识别： *margin-left:10px;

css仅IE6识别 : _margin-left:10px;

IE6及IE6以下识别 * html {…}

opera、safari、chrome识别：

@media all and (min-width: 0px){…} //Firefox3.0.6不识别，但Firefox3.6也识别该规则，如果Firefox版本有严格要求，请使用下一条规则

@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则

仅opera识别：

@media screen and (-webkit-min-device-pixel-ratio:10000)，not all and (-webkit-min-device-pixel-ratio:0{…}

CSS属性级别的hack仅IE识别： margin-left:10px\9;

本文链接