js 控制input输入框效果代码

作者：袖梨 2022-07-02

YPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

提示：您可以先修改部分代码再运行

<title> JS_HomeWork </title>
  <link href="1.<a%20href=" http: target="_blank">css" rel="stylesheet" type="text/css">
  <script type="text/javascript">
    function f1(){
	  var input1 = document.getElementById("1");
	  input1.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input1.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input1.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input1.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  var text1 = input1.defaultValue;
	  var text2 = input1.value;
	  if(text1!=text2){this.style.backgroundColor="#2B4780"}
	  	  var input2 = document.getElementById("2");
	  input2.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input2.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input2.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input2.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input3 = document.getElementById("3");
	  input3.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input3.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input3.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input3.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input4 = document.getElementById("4");
	  input4.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input4.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input4.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input4.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input5 = document.getElementById("5");
	  input5.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input5.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input5.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input5.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input6 = document.getElementById("6");
	  input6.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input6.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input6.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input6.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input7 = document.getElementById("7");
	  input7.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input7.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input7.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input7.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input8 = document.getElementById("8");
	  input8.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input8.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input8.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input8.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input9 = document.getElementById("9");
	  input9.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input9.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input9.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input9.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input10 = document.getElementById("10");
	  input10.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input10.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input10.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input10.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input11 = document.getElementById("11");
	  input11.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input11.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input11.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input11.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input12 = document.getElementById("12");
	  input12.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input12.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input12.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input12.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input13 = document.getElementById("13");
	  input13.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input13.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input13.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input13.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input14 = document.getElementById("14");
	  input14.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input14.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input14.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input14.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input15 = document.getElementById("15");
	  input15.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input15.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input15.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input15.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	  	  var input16 = document.getElementById("16");
	  input16.onmouseover = function(){this.style.backgroundColor="#FFE423"};
	  input16.onmouseout = function(){this.style.backgroundColor="#D3E9FC"};
	  input16.onclick = function(){this.style.backgroundColor="#FF6699"};
	  input16.onkeydown = function(){this.style.backgroundColor="#2B4780"};
	}
	
  </script>
 
 
   <table onmouseover="f1()" id="d1" align="center">
     <tr>
	   <td><input class="input" type="text" id="1" value="商品名"></td>
	   <td><input class="input" type="text" id="2" value="订单号"></td>
	   <td><input class="input" type="text" id="3" value="价格"></td>
	   <td><input class="input" type="text" id="4" value="数量"></td>
	 </tr>
	 <tr>
	   <td><input class="input" type="text" id="5" value="大白菜"></td>
	   <td><input class="input" type="text" id="6" value="2009121201"></td>
	   <td><input class="input" type="text" id="7" value="1.5元/kg"></td>
	   <td><input class="input" type="text" id="8" value="10个"></td>
	 </tr>
	 <tr>
	   <td><input class="input" type="text" id="9" value="洋葱"></td>
	   <td><input class="input" type="text" id="10" value="2009121202"></td>
	   <td><input class="input" type="text" id="11" value="2.3元/kg"></td>
	   <td><input class="input" type="text" id="12" value="20个"></td>
	 </tr>
	 <tr>
	   <td><input class="input" type="text" id="13" value="卫生纸"></td>
	   <td><input class="input" type="text" id="14" value="2009121203"></td>
	   <td><input class="input" type="text" id="15" value="3.5元/卷"></td>
	   <td><input class="input" type="text" id="16" value="30"></td>
	 </tr>
   </table>
   <div id="d2" align="center">
     <input type="button" id="b1" value="提交">
     <input type="button" id="b2" value="修改">
   </div>

提示：您可以先修改部分代码再运行

js 控制input输入框效果代码

相关文章

精彩推荐