Make readonly fields unclickable - javascript

In my form i am using readonly fields.
How to make this readonly fields unclickable I don't want to use disabled fields, just make readonly fields unclickable any one have idea plz share.

You can also use the property disable to make the input unusable and unclickable. I think it's more clear and efficient way.
Here is the the difference between readonly and disable:
<div>
<input disabled type="text">
<input readonly type="text">
<input type="text">
</div>

Call the blur event when input is focused.
<input readonly onfocus="this.blur">

I searched and i found the solution here it is.
<input type="text" readonly="readonly" id="#unclickable" />
<script>
$("#unclickable").focus(function(){
$(this).blur();
});
</script>

I found a much better solution to your problem :)
Assuming you have an input field as :<input type = "text" id = "textfield" >
You need to modify 2 things,
1:
Your HTML declaration should be like :<input type = "text" id = "textfield" readonly>
2:
Go to your css and add the following lines of code
#textfield:hover{
cursor:default;
}
#textfield:focus{
cursor:default;
outline:none;
}
Explanation: It'll still be clickable but we are removing any default style changes happening due to click event to none. i.e. a white border which appears is manually removed. Therefore you can pretty much simulate the effect that nothing is being clicked.

Related

Disable entire form elements with respect to a state. React

I am disabling the inputs using the isFetching prop,
but this is getting reduntant as I have to keep this in every input field.
Is there a way to disable the entire form?
Like a disable property in <form> tag or something?
<form>
<input type="text" disabled={this.props.isFetching} />
<input type="text" disabled={this.props.isFetching} />
</form>
I think this should solve your problem https://stackoverflow.com/a/17186342/3298693.
You should insert your form inside an element <fieldset disabled="disabled">. This will make the whole form disabled.
I had the same issue and this worked for me:
<fieldset disabled={true}>
Where true would be some "prop.setting"...
Just use <input type="text" disabled> wherever you want the input text to be disabled. It hardly takes some time.

textbox values unremoveable until the textbox is clicked

can anyone help me how to do this? i want to do is the textbox values is removable or cant be change until the textbox is clicked.Can anyone know how to do this?
Add the readonly attribute to your input ...
<input type="text" id="input_a" readonly />
//or
<input type="text" id="input_a" readonly="readonly" />
... and then onClick remove it
document.getElementById('input_a').removeAttribute('readonly');
//or
document.getElementById('input_a').readOnly = false;
The readonly attribute differs from the disabled attribute in that the value is still submitted with the form and, crucially, does not disable click (prevent the event being raised) on the element.

Disable input text

for some reason I want to disabled an input text and for this I use this sample code :
$('#id').attr('disabled', 'disabled');
Is there any way to disabled an input text without use attribute disabled of input text, I mean for example use css or other ways?
In fact I want an input text act like a disabled one without change it attribute?
With Best Regards.
Try:
<input id="myTxt" type="text" onfocus="this.blur()"/>
Or by JS:
$('#myTxt').focus(function(){
$(this).blur();
});
You can't do it through CSS (unless you do something very complicated like hide the input and put a disabled-looking rectangle in its place). However, this will disable the input without changing the attribute:
$("#id").prop('disabled', true);
try this
<input type="text" disabled="disabled" value="" />

Highlight text between form inputs?

I have a form that is validated by js when the user submits it. My code detects empty and invalid fields (ex 1 number in phone number is obviously an invalid phone number).
I am asked if i could highlight fields missing or in error. I think this would be cool IF i can do it automatically. With HTML like the below how can i make name, phone or whatever else turn red? i cant think of any solution. Maybe i can pull the html body from form find the target input and insert a div on the left side of the input to the prev tag and use that div to make the font red. But i HATE that idea because that requires poking the HTML instead of DOM and i am pretty sure some nastiness will occur. Any ideas?
Name: <input type=text name="Name"/>
Phone: <input type=text name="PhoneNo"/>
Change your HTML to have the <label> surrounding the 'Name' and 'Phone', which will make it more accessible and provide the functionality you're looking for.
HTML
<label for='Name'>Name:</label> <input type=text name="Name"/>
<label for='PhoneNo'>Phone:</label> <input type=text name="PhoneNo"/>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
jQuery
​$('input').blur(function() {
$('label[for="'+$(this).attr('name')+'"]').css('color','red');
});​​​​
Live Example
http://jsfiddle.net/tve8J/
You'll of course have to add your validation, I don't know what you consider and 'invalid field'
You should rather write your HTML to have an element around the labels in the first place. The correct HTML would be
<label for="Name">Name:</label> <input type="text" name="Name" id="Name" />
Then just add a class to the label to turn it red when it should.
By the way, this even makes the input receive focus when the label is clicked! Yay!
such as:
//some javascript validation here
name.style.color = 'red';
phoneNo.style.color = 'red';
?
How about labels with the for attribute? - Check out its documentation here

Swap CSS style of a group of elements on click

I found a thread, Change an element's class with JavaScript, that is along the lines of what I'm going for, but I don't know how to implement it.
I have a page with 4 input buttons and two CSS styles: "Selected" and "notSelected". One button will be hard coded initially as "Selected". When the user clicks another button, I'd like to programatically iterate through all the buttons (the number of buttons on each page will be between 2 and 10), set the clicked button's class to "Selected", and make sure all the other buttons are set to "notSelected".
I've got the logic down, but I've never done anything with JavaScript before, so I haven't the slightest idea about how to do this. If someone knows of a tutorial/piece of code already out there that does this, please point me in the right direction.
Thanks a ton!
You can go the easy way and use a framework like jQuery that does the hard work for you
As you are new to JavaScript, this might be a bit much, but have you considered using jquery? Take a look at toggleClass(): http://api.jquery.com/toggleClass/
Hi just made a quick script, Hope that helps you. Let me know if you find any problem with the script.
I am using focus event and input box, you may change it as needed.
function doSelect( obj ){ var
mylist=document.getElementById("formDiv")
var inputItems=
mylist.getElementsByTagName("input");
for (i=0; i < inputItems.length;
i++){
document.getElementById(inputItems[i].id).className
= "Notselected"; } document.getElementById(obj.id).className
= "selected"; }
Have a form tag within the div tag id="formDIV"
Have few input tags of type text and onfocus="doSelect(this)"
<body> <div
id="formDiv"> <form
name="testform">
<input type="text"
name="tx1"
id="text1"
onfocus="doSelect(this)"/>
<input type="text"
name="tx2"
id="text2"
onfocus="doSelect(this)"/>
<input type="text"
name="tx3"
id="text3"
onfocus="doSelect(this)"/>
<input type="text"
name="tx4"
id="text4"
onfocus="doSelect(this)"/>
<input type="text"
name="tx5"
id="text5"
onfocus="doSelect(this)"/>
</form> </div>
</body>
this should
help.

Categories

Resources