Computer >> Máy Tính >  >> Lập trình >> HTML

HTML DOM Input URL readOnly Thuộc tính

Thuộc tính HTML DOM Input URL readOnly đặt / trả về liệu URL đầu vào có thể được sửa đổi hay không.

Cú pháp

Sau đây là cú pháp -

  • Trả về giá trị boolean - true / false
inputURLObject.readOnly
  • Cài đặt readOnly sang booleanValue
inputURLObject.readOnly = booleanValue

Giá trị Boolean

Đây, “booleanValue” có thể như sau -

booleanValue Chi tiết
Đúng Nó xác định rằng trường url đầu vào là readOnly.
Sai Nó xác định rằng trường url đầu vào không phải là readOnly và có thể được sửa đổi.

Ví dụ

Hãy để chúng tôi xem ví dụ về Chỉ đọc URL đầu vào tài sản -

<!DOCTYPE html>
<html>
<head>
<title>Input URL readOnly</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL-readOnly</legend>
<label for="URLSelect">Contact Us :
<input type="url" id="URLSelect" onclick="showErrorMsg()" value="https://www.google.com" readOnly>
</label>
<input type="button" onclick="showMessage()" value="Copy URL">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputURL = document.getElementById("URLSelect");
   divDisplay.textContent = 'Above URL is read-only';
   function showMessage() {
      inputURL.select();
      document.execCommand('copy');
      divDisplay.textContent = 'URL Copied: '+inputURL.value;
   }
   function showErrorMsg(){
      divDisplay.textContent +=', This cannot be edited.'
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Trước khi nhấp vào ‘Sao chép URL’ nút -

HTML DOM Input URL readOnly Thuộc tính

Nhấp vào ‘Liên hệ với chúng tôi’ trường url -

HTML DOM Input URL readOnly Thuộc tính

Nhấp vào ‘Sao chép URL’ nút -

HTML DOM Input URL readOnly Thuộc tính