I am not sure if this is a bug in Chrome but for some reason when I use a html 5 range input I cannot deselect it. Even when I move my cursor away and let go of the button on mouse the slider continues to follow mouse movement and I cannot set the slider value. Even if I tab to the next input I still have this issue
This example is from W3Schools. I tried it on my android device and I don't have this same issue. Is there any workarounds, I specifically need to ensure it works with Angularjs.
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp" method="get">
Points: 0<input type="range" name="points" min="1" max="10">10
<input type="submit">
</form>
<p><b>Note:</b> type="range" is not supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
This Behaviour was as result of a Chrome Extension Dictionary Bubble: Instant Dictionary, Once I disabled it the Slider functioned as expected
Related
Fiddle here. Starting with html elements in the below given structure, safari for some strange reason could not enable all input elements. It just enables the first one only. Might be some bug?
<fieldset disabled><div>
<div><fieldset disabled>
<input type="text" disabled>
</fieldset></div>
<div><fieldset disabled>
<input type="text" disabled>
</fieldset></div>
</div></fieldset>
Javascript here:
$('fieldset').prop('disabled',false);
$("input").prop('disabled',false);
To make Safari correctly enable all inputs you should enable all fieldset from the inside out, so the nested ones first:
const fieldsets = document.getElementsByTagName('fieldset');
Array.from(fieldsets).reverse().forEach(fieldset => fieldset.disabled = false);
Complete codepen with some an extra use case with fieldsets.
This was tested on Safari 13.0. This is definitely a bug and I will report it to Apple.
I have a piece of code like this:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/><title>t</title></head>
<body>
<form id="F1">
<script>
function doit()
{
if(!F1.checkValidity())return;
alert("ID="+FName.value); //Do some processing
}
</script>
Enter your name: <input ID="FName" pattern="[a-zA-Z]+" required ><br />
<p><button OnClick="doit()"> DO IT</button></p>
</form>
</body>
</html>
It gets some input and validates it before processing data. According to https://validator.w3.org/check it does conform with HTML5. And It works fine in Firefox and Chrome, but not in IExplorer 11. It says ERROR SCRIPT 5009 "FName is undefined". However if I remove the form tag, FName becomes defined. But then I could not check the form validity.
I wonder if this is a IExplorer bug and how could I fix it. Thanks!
The input is a child of the form rather than the document.
I was able to duplicate the problem in IE. I solved it by referencing the element as F1.FName, i.e., as a child of the form element. And this worked in IE, Chrome, and Firefox. I suppose this is the expected behavior rather than a problem, but was unable to find a supporting reference.
if(!F1.checkValidity())return;
alert("ID="+F1.FName.value); //Do some processing
sorry about title, i know its messy but i dont know how can i describe this situation.
we have an input field. but no form element. here is the code
<input name="search" id="search" onkeypress="SearchBox(this.value);" type="text" value="Search"/>
<input name="searchbutton" align="left" class="okbutton" id="searchbutton" onclick="SearchBox(search.value);" type="button"/>
SearchBox function checking keycode and if it is 13 (enter button charcode) sending search request. this code works in IE8/9 but in IE10 have interesting behaviour.
above code middle of the page. and we have a button element top of the page for LOGIN.
in IE10;
i enter a word in input and press enter:
SearchBox function work,
but behave like LOGIN button is clicked also and its a problem
note:sorry about language, english is not my native language.
note 2: SearchBox() function removed. check the jsfiddle link for the latest code.
another solution
define your buttons type as button. because default type is submit
<button type="button" ....
Well, IE10 for Windows7 is a pre-release, and this seems to be one of the things MS should fix. Anyway, I don't know why this happens, but I've found a workaround for the problem:
Instead of button, use <input type="button">.
Live demo at jsFiddle.
I was having the same problem. Adding type="button" to all my buttons worked.
<button type="button">...
Even though my buttons are not in a form.
From other testing I've done IE 10 works exactly like Chrome. This is the only exception I've seen.
I've got a strange bug, well, MSIE does.
Seems it is failing on all major MSIE versions: 6, 7, 8 and 9 (!)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" ><head><title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
var test=jQuery('#in');
test.focus(function(){
if(test.val()=='empty')test.val('');
test.attr('readonly',false);
});
test.blur(function(){
if(test.val()=='')test.val('empty');
test.attr('readonly',true);
});
});
</script>
</head><body>
<input type="text" value="empty" readonly="readonly" id="in"/>
</body></html>
Let me explain how this system works and what is going wrong.
When the user clicks (focuses) the input box, the input box should be made editable (ie, lose readonly flag). Then, when s/he leaves the input box (ie, blur event) some processing is done (not shown in code) and the input box is made readonly.
This works like a charm in most browsers (firefox, opera, webkit-based), but not any version of IE (including 9 beta).
The problem is that in IE, the user has to click the input box twice.
At this point, you might ask is the inputbox left readonly the first time?
No. I tested it, javascript reports that it is editable.
Easy fix, just fire a click event on the input box (to simulate the user's double click behavior), no?
No, .click() and .focus() both failed. No idea why.
Edit: Know that the cursor does show up in the text box, at least visibly.
Important: People, please do at least try the code before answering!
I wouldn't say it's a bug.
If you change the value, you also remove the current textRange.
Try test.select() , it should give the cursor back to the input.
test.focus()
will result in a loop that will end in an "not enough memory"-error.
I believe that readonly should be readOnly. Seems weird you would toggle this property. You can also try to remove it
jQuery("#foo").removeAttr("readOnly"); //.removeAttr("readonly");
try this ive just tried that and it works:
<input type="text" value="empty" id="in" readonly/>
I would like the value of the input text box to be highlighted when it gains focus, either by clicking it or tabbing to it.
<html>
<body>
<script>
function focusTest(el)
{
el.select();
}
</script>
<input type="text" value="one" OnFocus="focusTest(this); return false;" />
<br/>
<input type="text" value="two" OnFocus="focusTest(this); return false;" />
</body>
</html>
When either input field is clicked in Firefox or IE, that field is highlighted. However, this doesn't work in Safari. (NOTE: it works when tabbing between fields.)
I noticed Safari is actually selecting the text then removing the selection quickly.
So I tried this quick workaround that works in all browsers:
function focusTest(el)
{
setTimeout (function () {el.select();} , 50 );
}
Edit :
Upon further testing it turns out the OnMouseUp event is clearing the selection so it is enough to add
onMouseUp="return false;"
to the input element for things to work as they should.
Not sure about a Safari-specific solution here, but an alternative would be to wrap the input element in a div and set the border properties of it via CSS. Then change border color, etc. when focused and unfocused.