网页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 
                }
            }
        }