i am double checking if everything is good with my website with also other browsers.
I noticed that in Chrome i can style readonly but in Internet Explorer you can't style it.
I normally have disabled on input fields but this readonly fields need to be readonly for putting it into the database.
If it's not possible. I want the readonly input not to be focused in with the mouse click. Because i now have a input field readonly with a placeholder. If i click inside the readonly input the text dissapears. So the input can change if i click inside it. Can that be prevented if my first question can't be done?
Thanks for your time, i appreciate it.
HTML readonly (need it to be readonly because i have to POST it)
<input id='overNightRate' type='text' name='overNightRate' class='form-control disabledDesign' placeholder="Bedrag word berekent" readonly/>
CSS
.disabledDesign:read-only{background-color:#003c85;
color: white;
opacity: 1;}
And i have more input fields which are the same but just calculate the sum of something. And that needs to be readonly also because it needs to store that input data to the database
If it needs to be readonly, I believe IE 11 supports the attr selector:
.disabledDesign[readonly='readonly'] {
background-color: #003c85;
color: white;
opacity: 1;
pointer-events: none;
}
<input id='overNightRate' type='text' name='overNightRate' class='form-control disabledDesign' placeholder="Bedrag word berekent" readonly="readonly" />
Edit: Tested on IE11 and works as expected.
Related
I'm trying to understand a problem that has been bugging me for a while, now.
I am wondering why checkboxes would be targeted by the pseudo element :read-only, even when not having the disabled attribute.
See the snippet below :
input:read-write + label {
background-color: green;
}
input:read-only + label {
background-color: red;
}
<!-- an active ( not disabled ) checkbox -->
<input type="checkbox" id="checkbox" />
<label for="checkbox">the checkbox</label>
<br />
<br />
<!-- a disabled text -->
<input type="text" disabled id="text"/>
<label for="text">the text</label>
<br />
<br />
<!-- an active ( not disabled ) text -->
<input type="text" id="text-active"/>
<label for="text-active">another text</label>
As you can see, both the checkbox and the first text input are targeted by the input:read-only, even though only the first text input has the disabled attribute.
I've done some research and came across this article on the subject which stated :
:read-only is a CSS pseudo-class selector that matches any element that does not match the :read-write selector.
Naturally I followed with a research on the :read-write pseudo selector and ended up on the mdn web docs page, which stated :
The :read-write CSS pseudo-class represents an element (such as input or textarea) that is editable by the user.
I feel like, since I can toggle the value of the checkbox, it should be considered "editable by the user" ?
I've made some test in some browser, Both Firefox ( 90.0 ) and Brave ( v. 1.27.109 Chromium: 92.0.4515.115 ) seams to have the problem.
I also tested in an old version of chrome ( Version 89.0.4389.90 ) and the behavior was not the same. Both element were unaffected by the :read-only pseudo-element, and the second text field was affected by the read-write pseudo element, even with the disabled attribute. Weird.
Maybe I'm missing something obvious ?
I've found why this behavior is occuring.
According to the HTML standard
The :read-only pseudo-class must match all other HTML elements.
Here, the all other HTML elements refer to the html elements on which the :read-write property does not apply.
On the same page, we can see what define an html element that is :read-write-able.
The :read-write pseudo-class must match any element falling into one of the following categories, which for the purposes of Selectors are thus considered user-alterable:
input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)
textarea elements that do not have a readonly attribute, and that are not disabled
elements that are editing hosts or editable and are neither input elements nor textarea elements
The relevent part, here, is input elements to which the readonly attribute applies. If we check the HTML standard page for checkboxes, we can see that the readonly attribute, indeed, does not apply.
The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, size, src, step, and width.
Which makes the checkbox falls into the categories of html elements on which the :read-write property cannot be applied. Hense the behavior of the original question's snippet.
While this does not explain how to bypass the behavior ( see Aditya's answer ), It explains why it is occuring, which was the part I was originaly interessed in.
As an aditional note, I'm still not sure as why it the background-color was not working of the :read-only element in Chrome 89.
Try this out
input:read-write + label {
background-color: green;
}
input:disabled + label {
background-color: red;
}
<input type="checkbox" id="checkbox" />
<label for="checkbox">the checkbox</label>
<br />
<br />
<input type="text" disabled id="text"/>
<label for="text">the text</label>
<br />
<br />
<input type="text" id="text-active"/>
<label for="text-active">another text</label>
Instead of using read-only you can use disabled in your css
According to your question you need to change the style of a disabled input but as you're using :read-only this means the input which is set to readonly is changed!
input:read-only { background: #121212; color: #fff; }
input:disabled { background: #555; color: #00aeff; }
<input type="text" value="ReadOnly" readonly><br>
<input type="text" value="Disabled" disabled><br>
<input type="text" value="ReadOnly & Disabled" readonly disabled>
Check this WebPage Read more about Readonlys
Conclusion? Well there's a Difference between Read-Only and Disabled inputs.
I have the following form element I need to disable from accessing via the mouse using purely CSS. I do not have access to the form element to disable by editing the form input markeup, I only have access to the CSS style sheets.
<input type="text" name="rs:def:website" size="48" maxlength="64">
I'm attempting to use the pointer-events:none to disable the element from being able to accept input. I need to make sure I don't disable other text input.
This is what I've tried with no luck. Any suggestions?
.rs:def:website .input{
pointer-events: none;
}
Here is the correct CSS selector:
input[name="rs:def:website"] {
pointer-events: none;
}
<input type="text" name="rs:def:website" size="48" maxlength="64">
As noted by other answers, this is not a foolproof way to prevent users from editing this input.
It's not possible with pure CSS. pointer-events: none; might work in some cases, but you can still Tab through.
You will need to change the actual HTML. Add disabled, either directly in the HTML-file or via Javascript.
<input type="text" name="rs:def:website" size="48" maxlength="64" disabled>
simply use disabled to disable input.
<input type="submit" disabled>
Is there a css or html only way to prevent a user from typing in an input field?
I want to dynamically add stuff and remove stuff etc to an input field but I don't want the user to be able to edit it and using the disable attribute on the html tag prevents me from doing what I want.
You can use readonly or disabled attribute.
The drawback to using disabled is that the value of the disabled element won't be submitted when the form is.
You'll likely want readonly. Which can easily be styled to look like a disabled element.
document.getElementById('test').value = 'Hello World!';
[readonly] {
border: 1px solid #ccc;
background-color: #eee;
}
<input type="text" id="test" name="test" readonly>
You can use the attribute readonly - read about it here
Yep, you can just set the input element's disabled property to true. That will prevent the user from modifying its contents, but you can do what you like with it by using Javascript to modify its value property.
add readonly to it
<input type="text" value="Hello" readonly />
Uhm.....
<input type="text" name="myInput" value="Whatever" readonly="readonly" />
More here: What is the correct readonly attribute syntax for input text elements?
You can fake the disabled effect using CSS.
pointer-events:none;
You might also want to change colors etc.
CSS is not meant to change the behavior of form elements. It's meant to change their style only. Hiding a text field doesn't mean the text field is no longer there or that the browser won't send its data when you submit the form. All it does is hide it from the user's eyes.
To actually disable your fields, you must use the disabled attribute in HTML or the disabled DOM property in JavaScript.
OR JQUERY
$('#fieldname').attr('disabled', 'disabled'); //Disable
$('#fieldname').removeAttr('disabled'); //Enable
I am using this code to try and submit a value via form but it doesn't seem to submit anything...
I would normally use a checkbox or Radio buttons for multiple options but I want to use an image to do this.
Is this code wrong?
<input id="test1" name="test1" type="image" src="images/f.jpg" value="myValue" alt="" />
So I want to pass the value in value="myValue".
The form works fine so that's not the problem, I just need help with the input part not submitting as I know that works.
Thanks
An input type="image" only defines that image as the submit button and not as an input that can carry over a value to the server.
Using the type="image" is problematic because the ability to pass a value is disabled. Although it's not as customizable and thus as pretty, you can still use your images ao long as they are part of a type="button".
<button type="submit" name="someName" value="someValue"><img src="someImage.png" alt="SomeAlternateText"></button>
I was in the same place as you, finally I found a neat answer :
<form action="xx/xx" method="POST">
<input type="hidden" name="what you want" value="what you want">
<input type="image" src="xx.xx">
</form>
I've found that image-buttons DO return a response, but you should NOT use a value-option. What I see returned are two version of the name="MYNAME" with .X and .Y endings.
For example:
<input type="image" src="/path-to/stop.png" name="STOP" width="25" height="25" align="top" alt="Stop sign">
This is within your <form> to </form>. If you click the image, what's returned are STOP.X and STOP.Y with numeric values. The existence of either indicates the STOP image-button was clicked. You don't need any special code. Just treat it as another kind of "submit" button that returns a pair of augmented NAMEs.
I've tried this on Safari, Firefox and Chrome. The image wasn't displayed with Safari, but where it was supposed to be located, my cursor turned into a finger-icon, and I could click it.
Some browsers (IIRC it is just some versions of Internet Explorer) only send the co-ordinates of the image map (in name.x and name.y) and ignore the value. This is a bug.
The workarounds are to either:
Have only one submit button and use a hidden input to sent the value
Use regular submit buttons instead of image maps
Use unique names instead of values and check for the presence of name.x / name.y
Here is what I was trying to do and how I did it. I think you wanted to do something similar.
I had a table with several rows and on each row I had an input with type image. I wanted to pass an id when the user clicked that image button. As you noticed the value in the tag is ignored. Instead I added a hidden input at the top of my table and using javascript I put the correct id there before I post the form.
<input type="image" onclick="$('#hiddenInput').val(rowId) src="...">
This way the correct id will be submitted with your form.
Inputs of type="image" don't send their name/value pair when used to submit the form. To me, that sounds like a bug, but that's how it is.
To get around this, you can replace the input with a button of type="submit", and put a img element inside.
Unfortunately, that causes your image to be in a ugly HTML "button". However, assuming you aren't using the standard HTML button anywhere, you can just override the stylesheet, and then everything should work as expected:
button, input[type="submit"], input[type="reset"] {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
<form action="/post">
<input name="test">
<button type="submit" name="submit_button" value="submitted">
<img src="https://via.placeholder.com/32" alt="image">
</button>
</form>
You could use a radio button/checkbox and set it to hide the button in css and then give it a label with an image.
input[type="radio"] {display: none}
input[type="radio"] + label span {display: block}
Then on the page:
<input type="radio" name="emotion" id="mysubmitradio" />
<label for="mysubmitradio"><img src="images/f.jpg" />
<span>if you need it</span></label>
And then set it to submit using javascript:
document.forms["myform"].submit();
Solution:
<form name="frmSeguimiento" id="frmSeguimiento" method="post" action="proc_seguimiento.php">
<input type="hidden" name="accion" id="accion"/>
<input name="save" type="image" src="imagenes/save.png" alt="Save" onmouseover="this.src='imagenes/save_over.png';" onmouseout="this.src='imagenes/save.png';" value="Save" onclick="validaFrmSeguimiento(this.value);"/>
function validaFrmSeguimiento(accion)
{
document.frmSeguimiento.accion.value=accion;
}
Regards,
jp
well if i was in your place i would do this.I would have an hidden field and based on the input image field i would change the hidden field value(jQuery), and then finally submit the hidden field whose value reflects the image field.
You could use formaction attribute (for type=submit/image, overriding form's action) and pass the non-sensitive value through URL (GET-request).
The posted question is not a problem on older browsers (for example on Chrome 49+).
Add this
name="myvalue"
To your tag.
To submit a form you could use:
<input type="submit">
or
<input type="button"> + Javascript
I never heard of such a crazy guy to try to send a form using a image or a checkbox as you want :))
I am using an <input readonly="readonly">, styled as normal text to remove the appearance of an interactive field, but still display the value.
This is very useful to prevent a user from editing a field, while still being able to post the value. I realize this is a convenience method and that there are several workarounds, but I want to use this method.
Problem: The blinking caret still appears when the field is clicked/focused. (At least in FF and IE8 on Win7)
Ideally, I would like it to behave as it normally does, focusable, but without the blinking caret.
Javascript solutions welcome.
On mine there is no caret or so:
<input type="text" value="test" readonly="readonly" >
Take a look at this: http://www.cs.tut.fi/~jkorpela/forms/readonly.html
Sorry, now I understand your problem.
Try this:
<input type="text" value="test" onfocus="this.blur()" readonly="readonly" >
You can use this in your css, but it will not focus:
[readonly='readonly'] {
pointer-events: none;
}
You can remove the blinking caret by specify the css attribute into transparent
caret-color: transparent;
you can test the result here
It can be done using html and javascript
<input type="text" onfocus="this.blur()" readonly >
or jQuery
$(document).on('focus', 'input[readonly]', function () {
this.blur();
});
the only way i found for this was
//FIREFOX
$('INPUT_SELECTOR').focus(function () {
$(this).blur();
});
//INTERNET EXPLORER
$('INPUT_SELECTOR').attr('unselectable', 'on');
KENDO
$('.k-ff .k-combobox>span>.k-input').focus(function () {
$(this).blur();
});
$('.k-ie .k-combobox>span>.k-input').attr('unselectable', 'on');
The onfocus/blur method works ok to remove the cursor from a readonly field, but the browser does not automatically refocus on the next field, and you may lose focus altogether, which is not what the user usually expects. So, if this is required, you can use plain javascript to focus on the next field you want, but you have to specify the next field:
<input type="text" name="readonly-field" value="read-only"
readonly onfocus="this.form.NextField.focus()">
Where 'NextField' is the name of the field to goto. (Alternatively, you could provide some other means to locate the next field). Obviously, this is more involved if you want to navigate to some non-visible UI element, like a tab-panel, as you will need to arrange this as well.
Easy!
Just add disabled to input and it will not be clickable (focused)