I'm trying to style my invalid elements in my html forms; simple enough in Chrome, but Firefox refuses to listen to my :invalid pseudoclass. Open the following in Chrome and Firefox to see what I mean:
<html>
<head>
<style type='text/css'>
:invalid{
color:#FF0000;
};
</style>
</head>
<body>
<form>
This box validates on inputs between 0 and 100:
<input class='myInput' type='number' min='0' max='100'>
</form>
</body>
</html>
Put in 101 to the input box, and Chrome turns it red while Firefox ignores it. Thoughts?
From this mozilla wiki page
<input type='number'>
number : New input type : New input type for numbers : bug 344616 : In pause
From this caniuse page :
Red = Not supported
From this more stable reference (thanks to jukka-k-korpela) :
type=number 6.0 (Localization in Chrome 11) Not supported
Unimplemented (see bug 344616)
It is not yet supported.
a solution would be using modernizr
Related
Is there not a working method to upload a file from edge / internet explorer? I am using the following on my site for html input tag:
<label for="userfile"><a>add</a><input id="userfile" name="userfile" type="file" style="display:none"/></label>
When you click on "add", the open file box pops up, but nothing is returned in console (see javascript code below). This code runs fine in Chrome, and displays results in console with no issue.
$('#userfile').on('input', function() {
var test_test = $('#userfile')[0].files[0];
console.log($('#userfile')[0].files[0]);
}
Based on my testing result, I find that on input is not working in IE and Edge.
you can try to replace on input with on change. It can work with IE and Edge.
Note that chnage event will only execute when there is change in file input. If user select the same file than it will not fire it.
Other thing I noticed that Label For is not working for IE. So in IE, You need to make HTML file input visible and click on it to execute the code.
Modified code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#userfile").on("change", function() {
var test_test = $('#userfile')[0].files[0];
console.log($('#userfile')[0].files[0]);
});
});
</script>
</head>
<body>
<label for="userfile"><a>add</a></label>
<input id="userfile" name="userfile" type="file" />
</body>
</html>
Output in IE 11:
Output in MS Edge:
you can try to find any work around for Label for or you can simply add a extra button and try to execute a code on click of that button may help you to solve the issue.
Anyone looking to use a custom button so that the input file works across most browsers, please take a look at this JS fiddle. This is exactly what I needed.
JS FIDDLE
<div class="file-input-wrapper">
<button class="btn-file-input">Mah Custom Uploadz Button</button>
<input type="file" name="file" />
</div>
I ended up changing the width and height and I made the button very small so that it wasn't taking up to much space on my site. Hope this helps someone.
I'm stumped why the mousewheel will not increment/decrement the value in a simple form element.
<input type="number" step="0.125" min="0" max="0.875">
It works on this snippet just fine, but not when I create a simple generic html document:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="">
<input type="number" step="0.125" min="0" max="0.875">
</form>
</body>
</html>
When I view this in several browsers, the mousewheel does not scroll. I've disabled browser extensions and such as well. Several other machines around me behave the same way.
What causes this to not work? Is this an OS/browser issue?
I almost feel like this might be something deeper, possibly the type of mouse/driver issue?
What I have tested on:
Win 7
Chrome - fail
Firefox - fail
Firefox Dev Edition - fail
Safari - pass
IE11 - fail
IE9 - fail
OSX
Chrome - fail
Safari - fail
Firefox - fail
To avoid the browser issue altogether, you might try using the jQuery mousewheel plugin to manually change your input value. For example:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="scroll.js"></script>
</head>
<body>
<form action="">
<input id="myInput" type="number" step="0.125" min="0" max="0.875">
</form>
</body>
</html>
scroll.js
$(function() {
$('#myInput').on("mousewheel", function(event) {
event.preventDefault();
$this = $(this);
$inc = parseFloat($this.attr('step'));
$max = parseFloat($this.attr('max'));
$min = parseFloat($this.attr('min'));
$currVal = parseFloat($this.val());
// If blank, assume value of 0
if (isNaN($currVal)) {
$currVal = 0.0;
}
// Increment or decrement numeric based on scroll distance
if (event.deltaFactor * event.deltaY > 0) {
if ($currVal + $inc <= $max) {
$this.val($currVal + $inc);
}
} else {
if ($currVal - $inc >= $min) {
$this.val($currVal - $inc);
}
}
});
});
Works for me in both Chrome and Firefox. The mousewheel event can be triggered when the mouse is hovering over the input as well, not just when it is selected.
Snippet runs in an IFRAME. Put your code into IFRAME and it will work too. Why - I don't know but it works.
i.e.
http://codecorner.galanter.net/bla2.htm - doesn't work (code by itself)
http://codecorner.galanter.net/bla.htm - works - previous page in an IFRAME
EDIT: Here's a demo of it working in Chrome 41: http://codecorner.galanter.net/bla_mousescroll.mp4
EDIT 2: I think I figured it out, and it's not IFRAMEs. In order for scroll event to happen - actual content has to be scrollable. For example if you redo your example like this:
<!DOCTYPE html>
<html>
<head></head>
<body>
<form action="" style="width:200px;overflow:scroll">
<div style="width:300px">
<input type="number" step="0.125" min="0" max="0.875">
</div>
</form>
</body>
</html>
where container form is smaller then its content - DIV - the scrolling wheel works on number field: http://codecorner.galanter.net/bla3.htm
So I think I figured it out.
First I copied your code into a html document and opened it in Chrome, and the increment didn't work.
Second I removed everything from the code except the input box, still didn't work.
Then I injected that code into random websites using the chrome inspector, I tried it on gmail, reddit and my own website. Gmail worked, reddit worked, but my own website didn't work.
So then I disabled javascript and it didn't work anywhere.
So to answer your question, stackoverflow / many other sites use javascript that automatically add that functionality to number inputs.
The problem
In IE11 the image in the following code is clickable to activate/toggle the input in the label:
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
While the image in the this exactly same code but inside of a <form> is not clickable to activate/toggle the input:
<form>
<label>
<input type="checkbox"> some text
<img src="http://placeimg.com/100/100/any" alt="some img">
</label>
</form>
(Demo at jsfiddle)
Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).
This was tested and reproduced on:
IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.
IE 11.0.9600.16438 on Windows RT 8.1 tablet.
IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.
IE 11.0.10240.16431 on Windows 10
This issue does not occur in IE9, IE10, Microsoft Edge, and other browsers.
Questions:
Can this be solved without JS while still using image tags?
If not, what other possible solutions are there?
(Optional) Why doesn't the image in the second example trigger the input element (while doing it in the first)?
One way to fix this is with pointer-events: none on the image, and adjusting the label with for example display: inline-block. (pointer-events is supported in IE11.)
label{
display: inline-block;
}
label img{
pointer-events: none;
}
(Demo at jsFiddle)
Is a bit older question, but as its pretty high in google search, I'll post here one more answer that fixes this in all IE versions.
.
The checkbox/radio has to be outside of label, it has to have own unique ID and label has to have attribute for which contains the ID of checkbox/radio its related to:
<label for="my_lovely_checkbox">Hello good friend</label>
<input type="checkbox" value="Hello" id="my_lovely_checkbox">
If you done that and if you use PHP (which you probably are), you can use this piece of code:
if (preg_match('~MSIE|Internet Explorer~i', $_SERVER['HTTP_USER_AGENT']) || (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false)) {
?>
<script>
$(document).ready(function() {
$("label img").on("click", function() {
$("#" + $(this).parents("label").attr("for")).click();
});
});
</script>
<?
}
I know its JS, but there is actually no other fix for =< IE10 without JS usage.
It detects all IE, versions (IE10 and 11 included, have no idea about Spartan tho, i think it does not detect that one).
Ps.: Answer above me does not actually work for IE8, IE9 and IE10. Just so you know.
We are using ckeditor in our project and have spotted following issue:
We should show pointer cursor for links within editor (as designed). It works for all browsers except IE.
Simplified HTML:
<div contenteditable="true">
Link to some site
</div>
In IE (tested in v.8 and v.10) it doesn't work.
Any ideas how it can be achieved in IE?
how about assigning cursor:pointer; for <div contenteditable="true"> ?
alternatively, you can also do it with jQuery:
$(function(){
$('[contenteditable="true"]').css('cursor','pointer');
});
hope that helps.
NOTICE: If you are intereseted on implementing text-security feautures, I've developed a jQuery plugin to accomplish this.
I'm using text-security to style inputs:
input.square-password {
-webkit-text-security: square;
}
In web browsers that dont support text-security, password is just shown (no asterisks (****)).
I'm looking forward to degrade this functionality on browser that don't support them, by using text-security when is available or using standard asterisks.
The input HTML is:
<input class="square-password textbox" name="paymentpassword" />
I tried adding a type="password" attr:
<input type="password" class="square-password textbox" name="paymentpassword" />
But it overwrites text-security even on browsers that do support it.
Any workarounds? Is it posible to set asterisks to the input via CSS (no type="password")?
EDIT: text-security seems only supported by webkit.
EDIT 2: inputs setted as type="password" can't be styled with text-security. Not even with !important (type="email" does)
EDIT 3: #ryan answer works fine on:
Firefox
Chrome
Opera
Can't change input type in IE8?
This was pretty quick and dirty but it works.
<html>
<head>
<style>
input{
-webkit-text-security:square;
text-security:square;
}
</style>
<script>
window.onload = function(){
init();
}
function init(){
var x = document.getElementsByTagName("input")[0];
var style = window.getComputedStyle(x);
console.log(style);
if(style.webkitTextSecurity){
//do nothing
}else{
x.setAttribute("type","password");
}
}
</script>
</head>
<body>
<div id="di">
<input/>
</div>
</body>
Tested in chrome and firefox, I'm on linux so I can't test in IE. Jsfiddle here.