This article will show you how to check if an element is read-only using JavaScript. Some of the methods we will cover include using the getAttribute() function or using the readOnly attribute.
How to check if an element is read-only using JavaScript
Readonly is a Boolean attribute to designate an input element as read-only.
An element with a readonly attribute does not participate in constraint validation, and the user cannot change the content of that element.
This article will give two methods to check if an element is read-only: using the getAttribute() method and the readOnly attribute.
Using the getAttribute() method
The getAttribute() method returns the value of an attribute specified on the element.
Syntax:
getAttribute(attributeName)
Parameter:
- attributeName: the name of the specified attribute.
Return value:
The value of attributeName. The return value will be null or an empty string if this property does not exist.
Example:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>LearnShareIT</h1>
<form>
<input id = "in1" type = "text" value = "input 1" readonly><br>
<input id = "in2" type = "text" value = "input 2" readonly = "readonly"><br>
<input type = "submit" onclick = "readonlyCheck()" value = "read-only check">
</form>
<script src="script.js"></script>
</body>
</html>function readonlyCheck() {
const element1 = document.getElementById('in1')
const element2 = document.getElementById('in2')
// Check if 'in1' element is read-only
if (element1.getAttribute('readonly')) {
document.getElementById("demo1").innerHTML = 'input 1 is read-only';
}
else {
document.getElementById("demo1").innerHTML = 'input 1 is not read-only';
}
// Check if 'in2' element is read-only
if (element2.getAttribute('readonly')) {
document.getElementById("demo2").innerHTML = 'input 2 is read-only';
}
else {
document.getElementById("demo2").innerHTML = 'input 2 is not read-only';
}
}Output:
Because the getAttribute() method returns the attribute’s value, the program will get an error when we set the readonly attribute for the element without setting the value for the attribute.
In the above example, I have set the readonly attribute for both elements with the id of in1 and in2. However, the readonly attribute on the element with id in1 is null, so the program runs wrong. The same thing happens when I set the value of the readonly attribute to an empty string.
Conclusion: when using the getAttribute() method to check if the element is read-only, the program only works correctly when we set the value to the readonly attribute.
Using the readOnly attribute
The readOnly attribute sets or checks if an element is read-only.
The read-only field cannot be modified. However, users can tab, highlight, and copy text from it.
Syntax to check if an element is read-only:
textObject.readOnly
Example:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>LearnShareIT</h1>
<p>Click the button to check if an element is read-only.</p>
<input id = "in1" type = "text" value = "input 1" readonly><br>
<input id = "in2" type = "text" value = "input 2" readonly = "readonly"><br>
<input type = "submit" onclick = "readonlyCheck()" value = "read-only check">
<p id="demo1"></p>
<p id="demo2"></p>
<script src="script.js"></script>
</body>
</html>function readonlyCheck() {
const element1 = document.getElementById('in1')
const element2 = document.getElementById('in2')
// Check if 'in1' element is read-only
if (element1.readOnly) {
document.getElementById("demo1").innerHTML = 'input 1 is read-only';
}
else {
document.getElementById("demo1").innerHTML = 'input 1 is not read-only';
}
// Check if 'in2' element is read-only
if (element2.readOnly) {
document.getElementById("demo2").innerHTML = 'input 2 is read-only';
}
else {
document.getElementById("demo2").innerHTML = 'input 2 is not read-only';
}
}Output:
In this example, we have two text fields, ‘input 1’ and ‘input 2’, with ids in1 and in2.
The text field ‘input 1’ is set to a read-only attribute with no value. The text field ‘input 2’ is set to a readonly attribute with a value of “readonly”.
Because the readOnly attribute only checks if an element is read-only and ignores the value of the readonly attribute, the returned result is correct.
Summary
This article has shown how to check if an element is read-only using JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. I will answer. Thank you for reading!
Maybe you are interested:
- Create An Image Element In JavaScript
- Check if an element is a checkbox using javascript
- Check if an Element does NOT have specific Class using JS
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
