網頁Input優化

1.Input樣式設計
一般HTML中的<input>是古板的，不管該input的屬性是text還是button還是其他，但input又是網頁中經常用到的表單元素，因此設置好它的顯示效果很重要。
如下，將爲input添加背景，消除邊框並且鼠標在其上時將修改input樣式。
首先是CSS樣式
.input_style
{
/*設置背景透明*/
background-color:transparent;
/*添加背景圖*/
background-image:url(images/bg.jpg);
/*不顯示邊框1
border-color:transparent;
*/
/*不顯示邊框2*/
border-width:0px;
}
.input_style1
{
border-width:4px;
}
其次是javascript函數，實現修改input的css樣式的功能
function onMouse(id,css_name)
{
document.getElementById(id).className=css_name;
}
最後是<input>
<input id="input" name="input" type="text" class="input_style" onMouseOver="onMouse('input','input_style1')">


2.Input設置只能輸入數字
（1）HTML5下直接設置input的type="number",但在一般顯示時，會在input右側有一個可以加1減1的上下箭頭，不太好看。消去的方法也是有的，即在style中加上以下代碼：
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input::-webkit-outer-spin-button {
-webkit-appearance: none;
}
（2）採用正則表達式方式，當輸入非數字時用''替換。自我感覺體驗不是太好，會有輸入的內容立馬消失的閃眼感。
<input id="amount" style="IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px" οnkeyup="this.value=this.value.replace(/\D/g,'')"  onafterpaste="this.value=this.value.replace(/\D/g,'')" maxlength="5" size="14" name="amount" type="text" /> 
（3）如下方法有一個Bug,當採用中文輸入法時，非數字可以順利輸入，粘貼內容到input中可能也會出現問題。。。
<input id="Text1" type="text" οnkeypress="return IsNum(event)" />
function IsNum(e) {
            var k = window.event ? e.keyCode : e.which;
            if (((k >= 48) && (k <= 57)) || k == 8 || k == 0) {
            } else {
                if (window.event) {
                    window.event.returnValue = false;
                }
                else {
                    e.preventDefault(); //for firefox 
                }
            }
        }