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>
Related
In my search field I just figured it out that, when I click the input field it remains till the content entered. I want to hide the placeholder when the field is clicked.
Since this site is going to be delivered to another team I don't want to add JavaScript or jQuery code here. Because it was one of the requirement from the client. How can achieve it using CSS and HTML? This is a default behavior of HTML.
<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">
You can use the selector input:focus::placeholder:
input:focus::placeholder {
visibility: hidden
}
<input type="text" value="" placeholder="Keywords or Chassis/ Reference No">
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 have some fields that are currently input fields. Some should allow edits and others not. Without changing them from input fields, is there a simple way to make it so I cannot edit these? I'm looking for just one CSS or other kind of property if that exists.
thanks
Mariko
You can add the readonly="readonly" attribute to the input elements.
Or disabled: <input disabled>
You can style both with CSS:
input:disabled or input[disabled] for disabled
input[readonly] for readonly
<input type="text" id="id" name="id" value="" readonly="readonly" />
either
<textarea ... readonly="readonly"></textarea>
and/or :
<textarea ... disabled="true"></textarea>
I prefer readonly -attribute, which just prevents modifying. Disabled attribute makes the whole area look disabled (grey) and disabled textarea's data isn't submitted, when a form is posted.
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)