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.
Related
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.
I've been running into a problem with touch events and content in an iframe on mobile safari. I have a text input box inside the iframe that a user can type in. On the main page, outside the iframe, there's a container with a touchstart event listener. If you start typing in the input box, then scroll around the page triggering the touchstart event, you will then no longer be able to type in the input box. The cursor is still there and blinking, the keyboard is still displayed, keyup events continue to fire, but the characters simply don't show up in the input box.
Here are two stripped down files to display the problem:
test.html:
<html>
<head>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div id="test" style="height:200px;"></div>
<iframe src="test2.html"></iframe>
<script type="text/javascript">
var test = document.getElementById('test');
test.addEventListener('touchstart', function(){ console.log('touchstart'); });
</script>
</body>
</html>
test2.html
<html>
<body>
<input id="input" type="text">
<script type="text/javascript">
var input = document.getElementById('input');
input.addEventListener('keyup', function(){ console.log('keyup'); });
</script>
</body>
</html>
If you remove (or comment out) the touchstart event listener, everything works just fine. I put some console.log statements in there just to show which events are firing and when.
I have found some discussion of similar problems (such as Touch events on parent document fire hover states in iframe in mobile safari. Is this a bug? Is there a workaround?), but haven't found anyone who's come up with an explanation or a workaround. Has anyone else run into this problem, and have you figured out a way to workaround it? It appears to be a mobile safari issue only, it works fine on android.
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.
I'm writing autotests with Watir-WebDriver and Ruby 1.9.2 on Ubuntu for the web. I have some iframe with several elements. I need to click on the items and check what happens. The <iframe> looks like:
<iframe id="iframe" align="top" some_attribute="some_attribute">
<html>
<head>
<title> Some title </title>
</head>
<body>
<div>
<button id="id_button" type="button" class="some_class"/>
</div>
</body>
</html>
</iframe>
When I click on the button, it should create the menu. But when I click on the button with watir-webdriver, nothing happens, as if he did not pressed. Watir don't print any exceptions, but do not press the button.
This problem persists only for Internet Explorer. For Firefox and Chrome, there is no problem. My code looks like:
browser = Watir :: Browser.new (: remote,: url => "http://some_ip:4444/wd/hub",: desired_capabilities =>: internet_explorer)
browser.goto ("http://some_http.com")
browser.iframe.button (: id, "id_button"). click
If I write
browser.iframe.button(: id, "id_button").attribute_value("class")
It's returning "some_class". This indicates that the item is recognized, but still nothing happens.
Please try this code
browser.iframe(:id, "iframe").button (: id, "id_button").click
if you need more information, check this link
http://wiki.openqa.org/display/WTR/Frames
Have you tried using a javascript command?
Eg:
browser.iframe.button(:id, "id_button").fire_event("onclick")
If that doesn't work, try debugging using IRB.
PS: I would write it as follows:
browser.iframe(:id, /iframe/).button(:id, /button/).fire_event("onclick")
When you set an html element to have display: none, the content inside that element (e.g. images and flash) wont be loaded by Firefox until the element is set to be displayed.
But Internet Explorer dont behave like that. It loads everything inside hidden elements from start.
Is there a way to prevent IE from loading such content without using javascript?
Don't insert any content into that element? Only load it using ajax when the user makes is visible.
As my question regarded a solution not using javascript, I'll answer my own question and just say there is no way so far to prevent IE from loading external files that are part of hidden content.
As the other answers suggest it, there are ways to avoid the problem, but not to solve it. So the answer to my specific question is "NO".
Actually if you set the visibility to hidden, ie won't load it.
Here is an example of what ZippyV is talking about (with a twist)... copy and paste the code below into a new file with an HTML extension and run it!
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1>This is the title</h1>
<p>This is a paragraph</p>
<div id="hidden-content"></div>
<p>Another paragraph</p>
<input type="button" id="add-content" value="Add Hidden Content" />
<script type="text/javascript">
$(document).ready(function() {
$("#add-content").click(
function() {
var info = unescape('%53%68%68%68%2E%2E%2E%20%73%65%63%72%65%74%20%69%6E%66%6F%72%6D%61%74%69%6F%6E');
$("#hidden-content").html(info);
}
);
});
</script>
</body>
</html>
The twist is that the hidden content to be displayed is first escaped (using the Javascript escape() function). Also, you can place the javascript in a separate file!
display: none should be hiding the element contents from ie as well as any other browsers.
Did you close all the tags?
function hide_show_content(el_ID){
//try <element hidden> property NOT IExplorer
try{el_ID.hidden = ((el_ID.hidden) ? false : true);}catch(_e){}
//try style=display:none for IExplorer
try{
if(el_ID.style.display==""){return;}
el_ID.style.display = ((el_ID.style.display=="none") ? "inherit" : "none");
}catch(_e){}
}
<span id="text#1" style="display:none;" hidden>TEXT TO BE HIDDEN or SHOWN laiter.</span>
Click to show TEXT