頁面文本框的只讀屬性readonly的設置與使用focus-blur事件方法的區別

時間 2019-11-30

標籤頁面文本只讀屬性 readonly 設置使用 focus blur 事件方法區別简体版

原文原文鏈接

1 <html>
2     <head>
3         <title>readonly與focus-blur的區別</title>
4     </head>
5     <body>
6         <input type="text" value="test strings" id="myInput" readOnly="readonly" />
7         
8     </body>
9 </html>

首先，注意readonly的寫法，當寫在標籤屬性行時，readonly須要小寫纔有效。javascript

<html>
     <head>
         <title>readonly與focus-blur的區別</title>
     </head>
     <body>
         <input type="text" value="test strings" id="myInput"  />
<script>
document.getElementById("myInput").readOnly="readonly";        
</script>
     </body>
 </html>

當在js中設置readonly的值得時候，此時的屬性名爲readOnly，O字母須要大寫纔有效html

<html>
<head>
<title>無標題文檔</title>
</head>

<body>
<input value="test strings" type="text" id="myInput" />
<script type="text/javascript">
document.getElementById("myInput").onfocus=function()
{
    this.blur();
}
</script>
</body>
</html>

當使用focus-blur方法模擬readonly時候，用戶是沒法選中文本框中的數據的，也就是沒法進行拷貝操做。java

總而言之，當咱們使用readonly的時候必定要注意何時字母O須要大寫何時須要小寫。而設置readonly的屬性值與使用事件方法focus-blur的差異在於，是否容許拷貝。this

相關標籤/搜索