js文本框不能输入字符-CSDN博客


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript">


//只能输入0-9的数字
	function numbercheckKey(key) {

		if(!(key>=96 && key<=105 || key>=48 && key<=57)){
			event.returnValue=false;
		}		

		var number = document.getElementsByName("number")[0].value;
		if(number.length>9){
			event.returnValue=false;
		}

		//这句话必须放到后面.不然的话得不到执行
		if(key==8){
			event.returnValue=true;
		}		
	}

//可以输入小数类型的数字
	function floatNumberCheck(key){
		if(!(key>=96 && key<=105 || key>=48 && key<=57)){
			event.returnValue=false;
		}

		var number = document.getElementsByName("floatNumber")[0].value;



		if(key==110 || key==8){
			event.returnValue=true;
		}
	}

	function showHidde(){
		obj = document.getElementsByName("checkbox")[0];
		if(obj.checked==true)
		{
			document.getElementsByName("info")[0].style.display="block";
		} else {
			document.getElementsByName("info")[0].style.display="none";
		}
	}


	function aa()
	{
		var va = confirm("是否提交");
		if(va)
		{
			alert("提交了");
		} else {
			alert("取消了提交");
		}		
	}	

	function change(value,del) {
	//alert(del);
		document.getElementById(del).style.color=value;
	}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>

<style type="text/css">
<!--
.style2 {color: #993399}
-->
</style>
</head>

<body>
<form name="form1" method="post" action="">
  <p>只能输入数字:
    <input type="text" name="number" onKeyDown="numbercheckKey(event.keyCode)">
</p>
  <p>可以输入小数:
    <input name="floatNumber" type="floatNumber" onKeyDown="floatNumberCheck(event.keyCode)">
</p>
  <p> </p>

  <p>
    <input type="checkbox" name="checkbox" value="checkbox" onclick="showHidde()">
    请填写信息
</p>
  <p>
    <input type="text" name="info" style="display:none">
</p>
<p>
	<input type="button" name="kk" value="确认窗体" onclick="aa()">
</p>
<p onmouseover="change('#993399','del1')" onmouseout="change('#FFFFFF','del1')" onmouseDown="change('#000000','del1')" ><span id="del1">变色给你看</span></p>

<p onmouseover="change('red','del2')" onmouseout="change('black','del2')" onmouseDown="change('blue','del2')" ><span id="del2">变色给你看2</span></p>
</form>
<p> </p>
</body>
</html>