CODEWITHSUNDEEP
javascripthtmlcssweb
Santiago
Santiago

Reputation: 76

Disable input text access but keep the element enabled

I want to do something like this enter image description here

The textbox can't be accesed but is enabled

Upvotes: 1

Views: 812

Answers (2)

Unmitigated
Unmitigated

Reputation: 89442

You can use the readonly attribute.

<input value="some value" readonly="readonly"/>

Or you can attach an event listener to the input's keypress, keydown, drop and dragover events and prevent the default action. You will also need to disable copying, cutting, and pasting by returning false. You may want to prevent the contextmenu event to prevent right clicking the input.

<input id="testInput" value="some value" oncopy="return false" oncut="return false" onpaste="return false"/>
<script>
document.getElementById("testInput").addEventListener("keypress", function(event){
  event.preventDefault();
});
document.getElementById("testInput").addEventListener("keydown", 
function(event){
 event.preventDefault();
});
document.getElementById("testInput").addEventListener("dragover", 
function(event){
 event.preventDefault();
});
document.getElementById("testInput").addEventListener("drop", 
function(event){
 event.preventDefault();
});
document.getElementById("testInput").addEventListener("contextmenu", 
function(event){
 event.preventDefault();
});
</script>

With jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" value="some value" oncopy="return false" oncut="return false" onpaste="return false"/>
 <script>
$('#testInput').on("keypress keydown dragover drop contextmenu",function(e){
    return false;
});
</script>

Upvotes: 4

Abdul Samad
Abdul Samad

Reputation: 78

That is not textbox. Google made looks like textbox and binding data through JavaScript. You could also do the same by creating a textbox like a box and bind the data to it with innerHTML.

Upvotes: 0

Related Questions