1. 程式人生 > >input type=file 禁止讓使用者手動輸入

input type=file 禁止讓使用者手動輸入

1. 取代法

       使用隱藏的<input type="file"/>控制元件,然後用一個只讀的文字框和一個按鈕來模擬<input type="file"/>的功能。

Html程式碼  
  1. <input type="file" name="file" onpropertychange="file1.value=this.value" style=display:none/>     
  2. <input type="text" name="file1" readonly/>     
  3. <input type="button" value="瀏覽" id="button1" name="button1" onclick="file.click()"/>  

2. 使用指令碼事件限制控制元件輸入

       將<input type="file"/>控制元件的滑鼠右鍵選單、按鍵事件限制住,不讓使用者有機會輸入。
Html程式碼  
  1. <input type="file" onkeydown="return false" onkeyup="return false" oncontextmenu="return false">  


3. 使用contenteditable屬性

       使用該屬性可以有效地限制使用者在<input type="file"/>控制元件中手動輸入內容,而只能通過檔案選擇對話方塊選擇檔案。

Html程式碼  
  1. <input type="file" id="file1" contenteditable="false" />  






只能輸入數字的Input
Html程式碼  
  1. <input  
  2. onkeypress="return (/^(-?\d+)(\.\d+)?$/.test(String.fromCharCode(event.keyCode))) || ( /^(-?\d+)$/.test(this.value)  )  "  
  3. onpaste="return !clipboardData.getData('text').match(/\D/)"  
  4. ondragenter="return false"  
  5. style="ime-mode:Disabled"