Firefox 21 draws red borders around required select-boxes when they are bound to an angularjs-model.
<select ng-model="color" ng-options="c.text for c in colors" required>
<option value="">-- choose color --</option>
</select>
Is there a way to let Firefox validate the input after selecting (or not selecting) an item?
→ A fiddle to demonstrate the problem
To get around this, you can disable the required style for when the form is pristine only:
.ng-pristine .ng-invalid-required {
box-shadow: none;
}
After a user has entered invalid data (and the ng-pristine class has changed to ng-dirty), the box-shadow will show again b/c this rule will no longer apply.
This has actually nothing to do with AngularJS but is a browser feature which you can control with CSS.
Take a look at this MDN-Doc: https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid and this question: Firefox 4 Required input form RED border/outline
With this CSS, Firefox seems to behave the same as Chrome:
select:invalid {
box-shadow: none;
}
http://jsfiddle.net/xLmC2/6/
#klamping: Your solution kinda works, but: As soon as you start typing in another field, your field gets the red shadow (since form.ng-pristine is not there anymore).
Better way:
.ng-untouched.ng-invalid-required { box-shadow:none; }
Drawback: The red shadow isn't shown when the user submits the form without ever clicking into this field (but the popup-tooltip is shown).
#DanEEStar: The problem only occurs if AngularJS is present. Your solution certainly works, but breaks the red highlighting completely (i.e. after form submission too).
I've created a bug report for AngularJS here:
https://github.com/angular/angular.js/issues/12102
Example:
<div ng-app>
<form>
<input type="text" ng-model="a" required>
</form>
</div>
Here's the fiddle: https://jsfiddle.net/5yh58orm/11/
Thomas Landauer's solution kinda works :), but as soon as you click/focus the field, the field shadow turn to be red again,
I suggest to use:
.ng-pristine.ng-invalid-required { box-shadow:none; }
For angular2, this is:
.ng-pristine.ng-invalid {
box-shadow: none;
}
To completly remove it type in css:
:-moz-ui-invalid:not(output) {
box-shadow: none;
}
I had the same problem when I used a select box outside of a form. The problem was fixed when I did this:
<form novalidate>
<select>
<option value=""></option>
</select>
</form>
I think then that this is a browser thing and nothing to do with angular?
Related
I have a input like this:
<input name="username" placeholder="Email" type="email" autocomplete="off" />
As you see I've set autocomplete attribute to off. But still when I open that page, the previous value is there:
Well how can I avoid that? Actually my problem is with ugly-background-color-input. When I change its value, it looks like this:
Anyway how can I deactivate caching for inputs?
try to do following :
<form autocomplete="off" ...></form>
it may work... or you can do this too.
$('#textfield').attr('autocomplete','off');
or use autocomplete="false", instead of autocomplete="off"
As you mentioned in your question that the background color of your input box is your problem, then you can change it the way you want.
You can use:
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Which will change the background to white. Or you may change it to any color you like.
Presumably you also a have a password field on the page? If not you can generate a random field name and get the value from the request object's key/value collection (maybe using a known prefix).
After looking at every answer to do with disabling autocomplete and trying around 20 combinations, the following was found to work on all current browsers (including latest Firefox, Chrome, IE 11 & IE Edge)
Place 2 dummy inputs (1 text and 1 password) with no names and no tabbing at the top of your form, but style them to be hidden (e.g. placed offscreen, but not actually display: none)
e.g.
<input tabindex="-1" style="left: -9999px;" type="text">
<input tabindex="-1" style="left: -9999px;" type="password">
Even the smartest browsers, which look for the first password field (regardless of its name) and attach the autocomplete to the previous input, will work with this.
when it is just about the design try
input:-webkit-autofill {
transition: background-color 5000s ease-in-out 0s;
}
in your css
Unfortunately Google chrome change it`s autocomplete settings with every new release. When you want to disable them now you have to update your solution everytime to prevent it in further versionsEdit:The only thing you can do to stop autofill and remembering passwords completely is giving IDs without "name" or "password" in it
As a usability feature I'd like to add highlights to the currently focused form element, in a similar fashion to the moneysupermarket forms. I'm working with an HTML pattern for building forms that I cannot change:
<div class="field">
<label for="name">
Name
</label>
<input id="name" type="text" value="Fred">
</div>
I thought I'd come up with a simple solution: I'll add focus and blur events to all inputs, selects and textareas that toggles a .hasfocus class on the wrapping div, then hook styling on that class.
Here's a demo on JSBin but if you're using Firefox or Chrome 40 you may see the issue I have: Adding the CSS content property to the div.field breaks the form interaction, it seems the initial mouse click is swallowed by the browser & you're unable to select the content. I'm stumped, I think it may be a browser bug. Any ideas how I can make the highlighted elements behave as the others?
Thanks in advance!
Edit:
Here's a screencast that demonstrates the issue: http://screencast.com/t/LlmwcsZ2qYM
I was unable reproduce in Chrome 42, but I did reproduce this in Firefox 37. It appears as though adding the highlighting to the label element fixes the issue:
.field.hasfocus label:before {
content:"";
...
}
Updated JS Bin: http://jsbin.com/kajifoquci/edit?html,css,js,output
You missed your test-x references.
The whole idea with the focus on the field through the labels, is the mapping of the for attribute with the id attribute. The name attribute alone is not going to cut it. Since id has to have a unique value on the page, I ended up at 5.
<label for="test5">
Test 5
</label>
<!-- name="test4" -->
<select id="test5">
<option value="">one</option>
<option value="">two</option>
<option value="">three</option>
</select>
So you can simplify your logic with:
$('input, select, textarea').on('focus blur', function (){
var el = $(this),
field = el.closest('.field');
field.toggleClass('hasfocus');
});
You can keep the .control.hasfocus:before to disable this effect on .control classes.
Hope this helps.
DEMO
<datalist> is an HTML5 tag which is use in order to order elements and choose them. when i use it with <input>, it gives me this.
i dont want to see list items like that before i typed it on, so can i eliminate this down button on it. is there an attribute for this?
ALSO can i use it other tags than <input>
NO is not an answer for this question!
To remove the down arrow, try using the following in your CSS:
input::-webkit-calendar-picker-indicator {
display: none;
}
Example http://jsfiddle.net/5UYdy/
Unfortunately, there is no selector which does it.
BUT!
You can add required attribute to the <input> tag. Then, we can access this input by CSS3 tags:
input:valid - when input has content
input:invalid - when input is blank
Adding following style:
input:invalid::-webkit-calendar-picker-indicator {
display: none;
}
will show the list only when the input is not empty.
The following JSFiddle shows that in action, hope it helps:
http://jsfiddle.net/5UYdy/2/
The only disadvantage is that the input is required.
And no, you can't use it with other elements, according to W3Schools
The tag specifies a list of pre-defined options for an element.
This will remove history of an input box but...,
<input type="text" autocomplete="off"/>
but I think there is no way to remove <datalist>
your best bet is this:
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
<div class="form-field__control">
<input
type="text"
list="currency"
id="currency"
/>
<datalist id="currency">
<option>Dollars</option>
<option>Pounds</option>
<option>Naira</option>
<option>Peso</option>
</datalist>
</div>
I've writen some code here: http://jsfiddle.net/anhtran/kXsj9/8/
Users have to select at least 1 option on the group. But it makes me must click all of them to submit the form. How to do this issue without javascript?
Thanks for any help :)
I think this html5 attribute is only supposed to define which fields are required.
You cant put logic in to say "at least one is required".
You will need to add custom javascript for this to work (and/or have validation on the server side).
hope this helps...
The ideal answer would be to use HTML5 and the required attribute as part of a select element, like so:
<form method="post" action="processForm.php">
<label for="myLanguages">What languages can you program in?</label>
<br>
<select id="myLanguages" multiple required>
<option value="C#">C#
<option value="Java">Java
<option value="PHP">PHP
<option value="Perl">Perl
<option value="Haskell">Haskell
</select>
<br>
<input type="submit" value="Submit">
</form>
Yes, I know they are not checkboxes, but the end functionality is exactly what you want. Sadly, neither IE 9 nor Safari 5 currently have support for the required attribute. Chrome 13 and FF 5, however, do. (Tested on Win 7)
I thought it'd be possible, to do in part, what you were after using CSS. Not using the required attribute but to instead hide the submit button if nothing was selected.
You'd get rid of the required attributes and use CSS similar to this:
input[type=submit] {
display:none;
}
input[type=checkbox]:checked ~ input[type=submit] {
display:block;
}
However, that particular CSS is not working on my version of Google Chrome. I've made a question regarding it here. It seems to be working fine on my FF 3.6 though.
You can't do this without javascript.
What you can do is select a default option and set it as selected.
But it can't assure you that a checkbox is selected when the form is submitted.
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)