HTML5 Input type "number" in Firefox - firefox

I am working on an app that is only used by a few people in-house, so I feel comfortable telling them to only use Firefox or Chrome, so I can use HTML5.
I was working on a very simple feature:
<style>
input:invalid { background-color: red; }
div.box {
border-color:#000;
border-width:thin;
border-style:solid;
}
</style>
<input type="number" name="id"> <small>(if the box becomes red, make sure you didn't put a space)</small>
It works great in Chrome: it becomes red and won't let you submit, without me coding anything else.
Firefox ... not so much. It acts as if I had a "text" type.
Is that a known issue? Workaround?
Thanks

First of all, are you using Firefox 4? HTML5 forms has much better support in version 4.
This page has details on HTML5 forms and the current bugs
https://wiki.mozilla.org/User:Mounir.lamouri/HTML5_Forms
Update: If the browser does not support the HTML5 features you want to use, try Modernizr. It uses Javascript to enhance support. It's documentation has information about input types.

Is that a known issue?
Yes. Unknown types are treated as text. (And types which only appear in draft specifications tend to be unknown by many browsers)
Workaround?
JavaScript

input type="number" is not implemented in Firefox yet as of version 25 (November 2013).
Bug 344616 is the relevant ticket in Bugzilla#Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=344616
Update 10 March 2014 - Good news! Looks like the ticket was fixed in Firefox 29, scheduled for release on 29 April 2014.
Update 30 April 2014 - Confirmed, I just gave it a try, and Firefox 29 has support for input type="number".

No browser gets this yet. Mileage may vary, but there is definitely work to be done in all browsers.
Opera will show you an UI letting you click arrows up and down to increase or decrease the number.
You can however submit the form even if anything but a number has been entered. Accessibility is not perfect yet, but at least you can also use the arrows of the keyboard to increase and decrease the number.
Chrome has no UI for the number yet, thus there is no help or no visual hint that a number is expected. Chrome also has no real error message. Turning the input border slightly red is definitely not good enough as a default and it is totally inaccessible. Chrome basically is the worst offender of all browsers when it comes to accessibility, e.g. zero support for ARIA.
You are using the :invalid pseudo-class to make the entire input widget red. Please recognize that this may be clearer than the default styling in Chrome, but it is still not an accessible solution. Since Chrome does not support ARIA, the bad news is that even if you'd provide a text error message through JavaScript, a blind user, or anyone else using a screen reader, might not hear it at all.
Firefox may be late to this game, but please recognize the fact that Mozilla have very strict shipping criteria for its features, while Chrome plays around with no thought about consequences.

i am using firefox, i had the same issue developing my input type number typing caracters and spaces etc...
anyway i m using angular 2 in this examples, its almost similar to javascript, so you can use this code in every case :
here is the html :
<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher"
(keypress)="FilterInput($event)" />
here is the function FilterInput :
FilterInput(event: any) {
let numberEntered = false;
if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
//console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
numberEntered = true;
}
else {
//input command entered of delete, backspace or one of the 4 directtion up, down, left and right
if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
//console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
}
else {
//console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
event.preventDefault();
}
}
// input is not impty
if (this.validForm) {
// a number was typed
if (numberEntered) {
let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
console.log('new number : ' + newNumber);
// checking the condition of max value
if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
console.log('valid number : ' + newNumber);
}
else {
console.log('max value will not be valid');
event.preventDefault();
}
}
// command of delete or backspace was types
if (event.keyCode == 46 || event.which == 8) {
if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
console.log('min value will not be valid');
this.numberVoucher = 1;
//event.preventDefault();
this.validForm = true;
}
}
}
// input is empty
else {
console.log('this.validForm = true');
this.validForm = false;
}
};
in this function i had to just let the keypress of numbers, direction, deletes enter, so this function is just for the positive integer not doubles.

Firefox has supported patterns since 4.0
<input name="hours" type="number" pattern="[-+]?[0-9]*[.,]?[0-9]+"/>
(For help, see http://html5pattern.com/)

Related

Foundation utils is not working in ie8

I am trying to use Foundation.utils in IE8 but I always get true on small only and false on the rest, for example:
Foundation.utils.is_small_only() = true all the time
Foundation.utils.is_small_up() = false
Of course the above can't happen because if it is small only, then it's for sure small up...
Any fix for that?
Foundation 5 doesn't support IE 8 at all but you can try this.
Quoted from Foundation FAQ:
Why doesn't Foundation support IE7 or IE8? Or: why we don't support a dying species.
This is probably the biggest question we get. Consider this: most of
today's popular browsers automatically upgrade themselves including
Chrome, Firefox and Explorer (starting with 9). IE 8 is the last IE
supported on Windows XP, which Microsoft will officially stop
supporting next year. That played a part in our decision.
Besides that, since Foundation 4, our framework is built mobile-first,
meaning it relies on media queries to layer in more complex layouts
and components. Browsers or devices that don't support media queries
will be restricted to a simple, single-column layout. In some ways,
Foundation 4 better supports IE6-7 insomuch as it provides a mobile
but not entirely broken experience. If IE8 support is important for
your users / customers, you can use Foundation 3.2, which supports
IE8. It's not mobile first but it's good stuff.
I've written my own solution to support utils in ie8.
I built it specific for my use (it could be done much better but why to make the effort? it's only for ie8..), still I believe you can use it, even with minor tweaks.
var win = $(window),
bodyFontSize = parseInt(body.css('fontSize'));
function matchMediaQuery(mediaQuery)
{
var winWidth = win.outerWidth(),
winHeight = win.outerHeight(),
mediaQuerySizes = mediaQuery.match(/\d+\.?\d*em/g);
if (mediaQuerySizes == null)
{
return true;
}
else
{
mediaQuery = mediaQuery.replace(/^(only screen)( and )?/,'').replace('min-width:',winWidth + '>=').replace('max-width:',winWidth + '<').replace('min-height:',winHeight + '>=').replace('max-height:',winHeight + '<').replace('orientation:landscape',winHeight + '>' + winWidth).replace(' and ',' && ').replace(' or ',' || ');
for (var i = 0, len = mediaQuerySizes.length; i < len; i++)
{
mediaQuery = mediaQuery.replace(mediaQuerySizes[i],parseInt(mediaQuerySizes[i])*bodyFontSize);
}
return eval(mediaQuery);
}
}
$.each(Foundation.media_queries, function(key, value)
{
eval('Foundation.utils.is_' + ((key.indexOf('-') > -1) ? key.replace('-','_') : key + '_up') + ' = function() { return matchMediaQuery("'+value+'"); }');
});

fckeditor copy paste disabled for Firefox and Chrome

I have and internal admin site that is used only by our people. For the most part they use Firefox ( that's the standard for the site anyway). We use Coldfusion 9 for development and have quite a few <cftextarea> tags. I seem to have lost touch with whatever controls the clipboard events. But, they have been disabled. I'm just guessing, but it seems like FF 42 seems to be the culprit when using the CF9 fckeditor. I could convert to another editor but that's a pretty big task.
I've been researching but can't find any clear instructions on setting security policies in FF. I need suggestions. I'm just about to try changing the tag from <cftextarea> to textarea but I know I'm going to run into problems getting getting richtext functions.
If you want to enable paste functionality icons you can alter following function:
var FCKToolbarButton = function(A, B, C, D, E, F, G) {
console.log(A, B, C, D, E, F, G);
this.CommandName = A;
this.Label = B;
this.Tooltip = C;
this.Style = D;
this.SourceView = true; //E ? true : false;
this.ContextSensitive = false; //F ? true : false;
if (G == null) this.IconPath = FCKConfig.SkinPath + 'toolbar/' + A.toLowerCase() + '.gif';
else if (typeof(G) == 'number') this.IconPath = [FCKConfig.SkinPath + 'fck_strip.gif', 16, G];
else this.IconPath = G;
};
and change
this.ContextSensitive = F ? true : false;
to
this.ContextSensitive = false;
You can find this function in FCKeditor/editor/js/fckeditorcode_gecko.js and FCKeditor/editor/js/fckeditorcode_ie.js
It's not best solution but it works.
The problem is caused by a changed security behavior in Firefox 41 and later.
You have to modify the following lines in fckeditorcode_gecko.js. Add "|| FCKBrowserInfo.IsGecko" in the following lines (marked bold). After that the paste buttons are always active and pasting something will always open up a paste window (it's the same behavior ckeditor uses).
GetNamedCommandState:function(A){try{if ((FCKBrowserInfo.IsSafari **|| FCKBrowserInfo.IsGecko**)&&FCK.EditorWindow&&A.IEquals('Paste')) return 0;
...
FCK.RedirectNamedCommands={Print:true,Paste:true};FCK.ExecuteRedirectedNamedCommand=function(A,B){switch (A){case 'Print':FCK.EditorWindow.print();break;case 'Paste':try{if (FCKBrowserInfo.IsSafari **|| FCKBrowserInfo.IsGecko**) throw '';
The changes are active instantaniously but Firefox sometimes does not reload changed Javascript files. In that case you should delete your browser history completely and then reload the editor.
The only option available is to convert to CKeditor and stop using tags. However, CKeditor has problems running under CFlayout tags. What a complete cludge of crap! The real solution is to get completely away from Coldfusion/Adobe. I don't have a suggestion, but I will be researching.

JQM Toggle flip switch error calling refresh

i am new to JQM.
I am trying to set up a switch control for home automation. There are switches for every room to be controlled by phone or computer.
THe issue I am having is that I have one toggle flip switch which should switch the whole group on or off. The problem is the updating of the other toggle flip switches on the side, eg. when selecting 'off' for the whole group all switches should be changed to 'off' or vice versa for the 'on' option. if any of the other switches is selected the 'Whole Group' switch should not be changed.
I have tried all kinds of refresh options but either the page hangs completely or I get the following error
Error: cannot call methods on slider prior to initialization; attempted to call method 'refresh'.
I have tried all different answers given in the forum, but none is working on Chrome, Firefox or iPhone Safari.
$(document).ready(function () {
$(".tswitch").bind("change", function (event, ui) {
var n = $(this).val();
console.log('Start value n: ' + n);
if (n == '0') {
$('.tswitch').val('1');
$('.tswitch').slider("refresh");
<!--$('.tswitch').val('1').trigger('create').slider("refresh")-->
console.log('0 toggle: ' + $(this).val() + ' value n: ' + n);
} else {
$('.tswitch').val('0');
$('.tswitch').slider("refresh");
<!--$('.tswitch').val('1').trigger('create').slider("refresh")-->
<!--var fts = $('.tswitch');-->
<!--fts.val('0');-->
<!--fts.trigger('create');-->
<!--fts.slider('refresh');-->
console.log('1 toggle: ' + $(this).val() + ' value n: ' + n);
}
});
});
the code is on http://jsfiddle.net/PdkQ5/98/
also tried JQM 1.8 and 2.0

smartgwt calendar getdaybodyhtml issue

I have a issue with the smartgwt calendar tool, I've customized it to assign special icon flags certain days in the month through the protected method getdaybodyhtml() of the class calendar, everything works fine except for one thing when I display the calendar on chrome(all versions) IE(7,8,9) and FF(till 14.0.1), but when I display the calendar on FF(between 15 to 19) this flags icons aren't displayed. I've made a follow to the code and I found that the html code that I defined there in the getdaybodyhtml() method is not printed.
I was looking on the smartgwt for any issue like that but i don't found anything related.
Any help would be received.
(sorry if my english is not so good, is my second language)
Here is the piece of code:
private Calendar calendar = new Calendar(){
#Override
#SuppressWarnings("deprecation")
protected String getDayBodyHTML(Date date, CalendarEvent[] events, Calendar calendar, int rowNum, int colNum) {
String value = defaultMessage != null ? defaultMessage : date.getDate()+"";
// The "events" are the events of the day
List<CalendarEvent> calendarEvents = new ArrayList<CalendarEvent>(Arrays.asList(events));
if(calendarEvents != null && calendarEvents.size() > 0) {
// Removing the tooltip and the excluded colours
removeTooltipsFromCalendar(calendar,date);
removeExcludedColoursFromCalendar(calendarEvents);
if(calendarEvents.size() == 1){
// Description contains the colour
String colour = calendarEvents.get(0).getDescription();
value = imgHTML(COASTAL_IMAGES_DIR+colour+COASTAL_IMAGE_SUFFIX, colourWidth, colourHeight, "images", "class='handCursor'", null);
}else if(calendarEvents.size() > 1){
// Might have two vessels going to the same port in the same day
Set<String> colours = new HashSet<String>();
for(CalendarEvent event : calendarEvents){
// Description contains the colour
colours.add(event.getDescription());
}
int numberOfPorts = colours.size();
for(String colour : colours){
value += "<div>";
value += imgHTML(COASTAL_IMAGES_DIR+colour+COASTAL_IMAGE_SUFFIX, colourWidth, colourHeight/numberOfPorts, "images", "class='handCursor'", null);
value += "</div>";
}
}else{
value = defaultMessage != null ? defaultMessage : date.getDate()+"";
}
}
return value;
}
};
PD: In all the versions of chrome and IE the piece of code:
value += "<div>";
value += imgHTML(COASTAL_IMAGES_DIR+colour+COASTAL_IMAGE_SUFFIX, colourWidth, colourHeight/numberOfPorts, "images", "class='handCursor'", null);
value += "</div>";
is printed ok, in fire fox till the 14 version it's printed ok, but in ff from 15 to 19 not prints the "div" and the "image". I already see the code throw firebug and the div just not apear in that firefox version(15-19).
PD: it doesn't work on last update of IE 10 too.
Are you able to see icons in following sample in SmartGWT showcase.
I'm able to see icons in above sample for April 2, April 3, April 4 and April 5 as of March 31.
CalendarEvent instances used in this sample are created for 2, 3, 4 and 5 days ahead of current date.
I'm using FireFox 19.0.2
Finally I found the issue. I don't know why but in the resent versions of Firefox, after 14 version, the gwt calendar(v 2.1) is repeating the printing of the calendar twice automatically, so when it prints the second time, it did it without the images inside the day bodies.
Solution: manually creation of code to stop the twice printing.

`String.fromCharCode(keyCode)` doesn't work in Firefox

String.fromCharCode(keyCode) doesn't work in Firefox.
For example
I press the semicolon key and it throws the 1/4 sign.
The number pad throws letters.
I am using this to do some field validation, because the event.key attrubute is not supported in FF.
Use event.which for FF. You can refer to this example
Keycode is the numeric identifier of the key on the keyboard. It's pretty much completely unrelated to the charcode, which is the Unicode codepoint of the character produced.
So using a keycode as an argument to fromCharCode will almost certainly give you garbage.
What are you actually trying to do with the keycode, and why?
Instead of event.keyCode try event.charCode. It will work in chrome and firefox.
$('#Name_Var').keypress(function (event) {
event = event || window.event;
var charCode = event.which || event.keyCode;
var charStr = String.fromCharCode(charCode);
// FireFox key Del - Supr - Up - Down - Left - Right
if (event.key !== undefined && event.charCode === 0) {
return;
}
//Only Num
if (!/^([0-9])*$/.test(charStr)) {
event.preventDefault();
}
//Num and letters
if (!/^[a-zA-Z0-9]+$/.test(charStr)) {
event.preventDefault();
}
});

Resources