I want to remove the up and down arrow when using the MUI number field. I'm using version 5.3.0. Is it possible in sx prop?
The sx prop
<TextField
sx={{...}}
id="outlined-number"
label="Number"
type="number"
/>
From the docs, the type prop accepts valid HTML input types. I believe the reason the up and down arrows are present is because you specified number as the type.
Try type="tel" instead, as it seems to be the standard input type for phone numbers.
Here is a reference to the tel type and why it's a good idea to use it. Note that if the current browser doesn't support it, it will fall back to being a regular text field
I found this answer here:
How to remove the up and down arrow from a mui number field?
Related
We have enabled autocomplete property true for all input fields. We didn't use form tags in the templates. The input fields don't fetch the previously entered data. So how can we implement autocomplete property.
Firstly, this is not specific to Aurelia. Once the element is in the DOM, it is a feature of the browser to offer the user a previously entered value for that field given that an assumption can be made about what the field is supposed to be!).
Depending on the browser, the autofill feature relies on having 'known' input attributes (name and type) and possibly even the surrounding text, including label text.
If you are not getting the expected results, try making sure your inputs have very obvious name attributes, first. Eg.
<input type="text" name="email">
If you could share a snippet of code, I might be able to offer more help.
Is the following valid per WCAG 2.0?
<span id="my-label">Your photo</span>
<input id="my-upload" type="file" aria-labelledby="my-label">
The OS X screen reader understands this, e.g. reading the label for the input when it gets the focus, but Total Validator complains as follows:
You can try it yourself by running Total Validator on this page. Is Total Validator correct to report this error, or is this a bug in Total Validator?
(Obviously, in this particular example, I could use a <label for="my-upload">, instead of relying on the aria-labelledby. One could even argue that using a <label> has more semantic weight and should be prefered. But that is not the question I'm asking, as in my real-life scenario using a <label> can't be done.)
aria-labelledby is used to provide information to accessibility devices like screen readers. It won't be of any help if you do not use such specific device.
It won't give any information to 99% of people. So yes, Total Validator is correct to report this as an error as WCAG does not require to use a specific device. That being said, you can use the title attribute in situation where you can't use a label tag.
See: H65: Using the title attribute to identify form controls when the label element cannot be used
It is ok to use aria-labelledby as a way of creating an accessible name where a visible label already exists. It is better to provide a label association using for-id because that will allow clicking on the label text to place the focus in the input field (or select the checkbox or radio button).
Your accessibility analyzer is old. If you use the aXe accessibility analyzer, you will notice that it will not complain about this issue.
I'm creating a CakePHP 3.0 form, and I have several input fields (Form->input) where users will enter values of United States Currency. I'd like to add a $ symbol to the left of the input box. From my research, it does not appear that CakePHP's Form supports this on its own, so I believe that a CSS solution would be ideal. The corresponding fields in the database are floats.
:before and :after are applied inside a container, which means you can use it for elements with an end tag.
Source
Basically, what that means is you cannot use before on inputs, since it would insert the content into the input.
You can do it with CSS's :before pseudo element, but you have to wrap the input in a element, or place an element before it:
.inputcon:before{
content:'$'
}
Or, you can do it with jQuery:
$("input").wrap("<span class='inputcon'>");
Or with Vanilla JS:
var inputs = document.getElementsByTagName("input");
for(var i =0;i<inputs.length;i++){
var wrapper = document.createElement("span");
wrapper.classList.add("inputcon")
inputs[i].parentNode.insertBefore(wrapper,inputs[i]);
wrapper.appendChild(inputs[i])
}
It sounds like you want to override the input template to include a $ before the input field. The default input template is <input type="{{type}}" name="{{name}}"{{attrs}}>, so it would change to $ <input type="{{type}}" name="{{name}}"{{attrs}}>.
http://book.cakephp.org/3.0/en/views/helpers/form.html#customizing-the-templates-formhelper-uses
You could override the entire form (probably not what you want), or just that one input. Most of the examples in the book show you how to override for the entire form, but you can override for just that one input field.
http://api.cakephp.org/3.0/class-Cake.View.Helper.FormHelper.html#_input
Restricting the field itself to only numbers/symbols that are appropriate for a currency is a javascript/html5 issue, separate from cake. If this is what you want, you should also validate server side with cake.
Additionally, somewhat off topic, currency fields should not be stored as floats in the database. They should be stored as some fixed precision type (such as the decimal type in mysql).
I'm trying to create a form Polymer component where form elements are generated on the fly. I've looked, and so far the only way to bind the value attribute is by using .injectBoundHtml. This does not work with all component types, I'm trying to bind the value of a <textarea>, and this is what I get:
Removing disallowed attribute <TEXTAREA value="{{ results[ "comments" ] }}">
My work around was to add: textareaID.addEventListener('change', updateValueMap)
I'm hoping someone could tell me why value is disallowed, and/or if there is a better way to programmatically assign bound attributes in Polymer. Please :)!
Thanks to Gunter's suggestion, and passing a node validator:
var val = new NodeValidatorBuilder.common()
..allowElement('textarea', attributes:['value']);
this.injectBoundHtml(getElementStr(i), element:selP, validator:val);
Textarea doesn't have a value attribute.
Try this instead
<textarea>{{results['comments']}}</textarea>
For more information about the message Removing disallowed attribute see How to create shadow DOM programmatically in Dart?
Is this possible to achieve without javascript/jQuery?
I currently have a login template with the input fields as:
<input id="username" type="text" name"username" placeholder="username" autofocus>
I was wondering if there was a way when the user clicked their mouse on the field to type the placeholder text would disappear without using javascript if possible? Before this i was just using value and echoing the variables out into the fields but currently experimenting with HTML 5 and CSS3.
Thanks.
New browsers have a native way to do this. And if supported, you don't have to do anything.
With older browsers you do need to use javascript.
Edit: When using new features on old browsers its called Pollyfills. Here is a nice list with a lot of pollyfills that can be used together with Modernizer, that in turn can detect this features.