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
Related
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?
We have started using Wijmo (based on the jQuery UI & jQuery UI Theme Roller) on one of our applications but have a problem with the dropdown and button in the Wijmo Form Decorator styling.
I have had a look at the Wijmo Docs but they haven't been helpful.
We have initiated the script and the style is applied however on all forms I cannot get the dropdown item to align correctly with other elements.
The initiation script is as follows:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
$("select").wijdropdown();
$(":input[type='radio']").wijradio();
$(":input[type='radio']").wijcheckbox();
$("button").button();
});
</script>
As you will notice the .button() and .wijdropdown() functions are applying to each instance of the tag versus a class or an ID - we have the same problem with all 3 methods and have gone this way as this is what is desired through the entire application.
You can see a screenshot of the problem here:
I have been using Firebug to try and work out what the problem is and I suspect part of it is that Wijmo converts the select element into a div and applies JS to enable the select functionality.
I have been using both Firebug and Chrome developer tools to debug this, I notice that there is no margin being applied either above or below either element.
I have removed all other stylesheets that are not Wijmo or ThemeRoller but no change. We are using the "rocket" theme that comes with Wijmo.
Each time I try and manipulate the margin-top property on either it realigns all elements that are inline with the input search field directly above.
The HTML code for the form is:
<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
<label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
<br />
<select name="searchType">
<option value="standard">Standard</option>
<option value="fuzzy">Fuzzy</option>
</select>
<button>Search serial numbers</button>
<input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>
It is really important for us to get this aligning correctly and appreciate any suggestions, thanks in advance.
you need to wrap all the forms elements inside a div with let's say a class "input" and apply this style to the div elements:
div.input {
display: inline-block;
vertical-align: top;
}
here you can see a jsfiddle that shows how it looks like.
as a suggestion, next time create a jsfiddle more than a screenshot so it's easier for people and for you to test your code.
I have a checkbox created as follows:
<td class="center">#Html.DisplayFor(modelItem => item.IsBusinessHours)</td>
It renders as the following html:
<input disabled="disabled" class="check-box" type="checkbox" CHECKED="checked"/>
My problem is that the check in the box is very hard to read in this disabled state.
I would like to know the best way to style the checkbox to make it appear like the non-disabled checkbox (or otherwise make it more readable). However I still want the checkbox to be read only.
My project uses Asp.Net MVC, jQuery and jQuery-UI.
you can add rules like this to you CSS style sheet :
input[disabled='disabled'] {
color: #ccc;
}
but ie6 doesnt support that, just a heads up.
I ended up resolving this issue by replacing my checkboxes with jQuery UI buttons. The jQuery script that I ended up using is posted here.
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.
In my asp page there is one textbox name "ProductName"
if i write any thing in that textbox and refresh that page , textbox is not clear in firefox. But i open this same page in Internet explore and write any thing in textbox and refresh the page, my textbox comes clear
why textbox not comes clear in FireFox?
This is the html code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<input type="text" id="ProductName" name="ProductName" style="width:235; height:20" value="">
</body>
</html>
This is a feature of Firefox (one I'm quite fond of). There's nothing you can do about it on the server-side.
EDIT:
The longer version: There is something you can do about, but it's very messy. Basically, the way Firefox implements this is it refills in form elements with the same name when the user hits the refresh button.
The workaround is to change the name attribute on your HTML form elements every time the page loads. How you keep track of what you change them too is left to your discretion, but let me just say that as a Firefox user myself, having a website do this would annoy me no end.
"Actually firefox is stupid that way." - yes it is.
Another way would be to set autocomplete="off" on the input
Firefox isn't stupid that way. That's appropriate behavior because presumably the div your fading in occurs on an event e.g. onclick, onchange, etc. And since that event isn't triggered on refresh firefox has no reason to show your div. It's your responsibility to write the js necessary to trigger events onload or when document is ready.
Back to topic: a simple solution is to set the autocomplete attribute of your form to 'off'
That's it.
You can add the autocomplete="off" attribute to the input as shown below and it should fix the issue.
<input type="text" id="ProductName" name="ProductName" style="width:235; height:20" value="" autocomplete="off">
Actually firefox is stupid that way. Let's say you have a checkbox and when the user clicks to activate that checkbox there is a div that should fade in. The problem here is that if you refresh the page your checkbox will remain active but your div will be hidden. They(firefox) did not think it all the way through and that is .. well stupid. Because of that you have to resort to js workarounds which (I'm not quite fond of).
I do agree that you need to have, at some poin, the same value inside some input, like when you submit a page, there is an error and you need to redirect the user back to the page containing the form. Then yeah!, ok!, you need the values... but to keep the values on refresh , well that s just stupid.
What user enters his details and then just thinks "hm I'll just press f5 now see what happens". If that's the kind of user 'roaming round' your site, please shut it down it's infested with stupidity
Ok so now that that is out of the way.
"change the name attribute on your HTML form elements every time the page loads"
this is a bad idea don`t do this...
instead you can use a js function that simply gets the input and sets the value to ""
onpageload:
document.getElementById('inp1').value = '';
document.getElementById('inp2').value = '';
document.getElementById('inp3').value = '';
and so on and so forth.
P.S. this is just an example, it's your job to see, what fits for you (be it jquery, prot or whatever); to see if you use a for loop or not; etc
HTMLFormElement instances inherit a reset method.
It can be used to clear all forms to its default values:
for(var i=0; i<document.forms.length; ++i)
document.forms[i].reset();
for this problem add
autocomplete="off"
attr to input tag for example:
<input type="text" autocomplete="off" id="ProductName" name="ProductName" style="width:235; height:20" value="">
You can use Ctrl+Shift+R command to force reload (not from cache) (see Page Navigation Shortcuts on http://www-archive.mozilla.org/docs/end-user/moz_shortcuts.html)
Server-side solution:
PHP session_start() clears input data. Tested on firefox 103.0.2.
<?php session_start(); ?>
<input type="text" />
<br/><br/>
<select>
<option>Choice 1</option>
<option>Choice 2</option>
<option>Choice 3</option>
<option>Choice 4</option>
</select>