HTML DOM 输入 url readOnly 属性
HTML DOM Input URL readOnly 属性设置/返回是否可以修改 Input URL。
语法
以下是语法 -
- 返回布尔值 - true/false
inputURLObject.readOnly
- 将 readOnly 设置为 booleanValue
inputURLObject.readOnly = booleanValue
布尔值
此处,“booleanValue”可以如下 -
booleanValue | 详细信息 |
---|---|
True | 它定义输入 url 字段为 readOnly。 |
False | 它定义输入 url 字段不为 readOnly,可以修改。 |
示例
让我们看一个 Input URL readOnly 属性的示例 -
<!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>
输出
将会产生以下输出 -
点击 ‘复制 URL’ 按钮之前 -
点击 ‘联系我们’ url 字段 -
点击 ‘复制 URL’ 按钮 -
广告