上一周的工作是做一个javascript的应用，其中一个小功能是根据用户输入的列车（火车）类型来动态的生成票价的文本输入框（text input），当时的第一印象是在用户输入列车（火车）车次时通过onkeyup或onblur事件中获取车次号，然后判断是D字头，Z字头或其他类型，然后通过Dom或插入innerHTML来生成票价的输入框。不过为了让用户体验更加友好开始寻觅一个更好的实现方式。

在以前修改其他人的代码的时候曾经用到过onpropertychange和oninput时间，onpropertychange（oninput是IE下的事件）能够捕捉每次的键盘输入，在写了个小的demo

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>onpropertychange and oninput demo</title> 
  6. <script type="text/javascript"> 
  7. <!--  
  8. function outputtodiv() {  
  9.     document.getElementById("output").innerHTML =     document.getElementById("input").value;  
  10. }  
  11. --> 
  12. </script> 
  13. </head> 
  14. <body> 
  15.     <div id="output"></div> 
  16.     <input type="text" name="input" id="input" onpropertychange="outputtodiv();" oninput="outputtodiv();" /> 
  17. </body> 
  18. </html> 

测试通过后决定了通过这种方法来实现。

相关代码如下：

  1. function changeTrainType() {  
  2.     var traintypeStr = "-DZ";  
  3.     var strInput = document.getElementById("trainid").value;  
  4.     if(strInput && strInput != "") {  
  5.         var firstChar = strInput.substr(0, 1).toUpperCase();  
  6.         if(traintypeStr.indexOf(firstChar) == -1) {  
  7.             firstChar = "O";  
  8.         }   
  9.         if(firstChar == "D") {  
  10.             document.getElementById("zhekou").disabled = false;  
  11.             document.getElementById("zhekouspan").style.color = "";   
  12.     } else {  
  13.         document.getElementById("zhekou").disabled = true;  
  14.         document.getElementById("zhekouspan").style.color = "#999";  
  15.     }   
  16.     var seatArr = traintype_seat[firstChar];  
  17.     var priceHTML = '';   
  18.     for(var i = 0; i < seatArr.length; i ++) {  
  19.         priceHTML += seatArr[i] + ' <input class="input_2" seattype="' + seatArr[i] + '" name="price" type="text" />元&nb  
  20. sp;';  
  21.     }   
  22.     document.getElementById("hcptc_price").style.visibility = "visible";  
  23.     document.getElementById("hcptc_price").innerHTML = "票价(全价)：" + priceHTML;  
  24. } else {  
  25.     document.getElementById("zhekou").disabled = true;  
  26.     document.getElementById("zhekouspan").style.color = "#999";  
  27.     }   
  28. } 


一切都很顺利，在Firefox测试成功时，在IE下测试该功能发现无论如何也不能正常的取回input的value，开始认为是FireFox和IE在dom接口的差异，在仔细的review代码后没有发现可疑的地方，万般无奈下将onpropertychange（oninput）属性替换为onblur后在进行测试，一切如同没电的闹钟换了电池一样的跑了起来，至此总结在应用非常见事件时一定要十分小心，以免花费大量时间来调试！