CODEWITHSUNDEEP
javascripthtmlcss
Yannic Hansen
Yannic Hansen

Reputation: 235

html disabled textfield should allow changes made by javascript

i have a textfield which should be disabled for user-actions but should be filled by a javascript after another user-action. Is this somehow possible?

It can be a solution made by js, css or even html.

Upvotes: 0

Views: 59

Answers (3)

vozaldi
vozaldi

Reputation: 97

Your field

<input type="text" id="text1" name="text1" readonly>

readonly mean the value is not null and the field not changeable. Whereasdisabled might causing the input value being null.

And your javascript is like this

function changeVal(myval){
     document.getElementById('text1').value = myval;
}

Complete Fiddle http://jsfiddle.net/yuk0mcrx/

Upvotes: 1

rmorrin
rmorrin

Reputation: 2485

Without some code to illustrate your situation it's difficult to say for sure, but something like this might suffice:

function updateTextbox() {
  document.getElementById('text').value = 'Value updated through JavaScript'
}
<input id="text" type="text" disabled="disabled"  />

<button id="update" onclick="updateTextbox()">Update Textbox</button>

Adding disabled="disabled" to your input will disable it from user input, but can still be changed through javascript.

EDIT: If you want to change the value through a click on the element (as suggested in comments) this is a little more difficult as elements do not trigger click events when disabled. We can however use an invisible element in front of the input as a work-around:

function update() {
  document.getElementById('textbox').value="Updated from hidden element click!"
}
<div style="position: relative;">
  <input type="text" id = "textbox" disabled="disabled" style="width: 250px; height: 20px;"/>

  <!-- You'll need to account for default border/padding on input elements when styling -->
  <div onclick="update()" id="invisible" style="position: absolute; left: 0; top: 0; height: 26px; width: 254px;"></div>
</div>

Upvotes: 2

void
void

Reputation: 36703

HTML

<input id="myText" type="text" value="Hello">

JS

document.getElementById("myText").disabled = true;
document.getElementById("myText").value = "Yes, Changed!";

In JS you can make whatever changes you want to make and you can trigger it on any user action.

Fiddle

Upvotes: 0

Related Questions