I have discovered a problem in Firefox when you try to make focus in an input radio. It doesn't make focus in the input, unless you previously use tab to focus on the input before. After that it works correctly. Does anyone know how to solve it? Thank in advance!
<!DOCTYPE html>
<html>
<body>
Radio Button: <input type="radio" id="myRadio">
<p>Click the buttons below to give focus and/or remove focus from the radio button.</p>
<button type="button" onclick="getFocus()">Get focus</button>
<button type="button" onclick="loseFocus()">Lose focus</button>
<script>
function getFocus() {
document.getElementById("myRadio").focus();
}
function loseFocus() {
document.getElementById("myRadio").blur();
}
</script>
</body>
</html>
It is working for me in Firefox (v47.0 and v47.0.1). The only thing is not highlighting it... But if you add some CSS like the following, you will see how it is working fine:
input#myRadio:focus {
outline: 7px solid yellow;
}
Related
I have this code which is supposed to hide and show a DIV by checking and unchecking a form checkbox using the control onChange event. It works in Chrome, Firefox, Safari and Opera but IE 8 and 9 refuse to cooperate... There are no error messages in the console. Anything I'm missing?
Thanks for any help!
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Demo</title>
<script type="text/javascript">
var divVisible = true;
function Passport() {
if (divVisible) {
document.getElementById('mydiv').style.visibility="hidden";
divVisible = false;
}
else {
document.getElementById('mydiv').style.visibility="visible";
divVisible = true;
}
}
</script>
</head>
<body>
<form>
<input type="checkbox" onchange="Passport();" value="Passport">Passport
</form>
<div style="height: 100px; width: 100px; background-color: #ff0;" id="mydiv"></div>
</body>
</html>
According to this answer
onchange in IE only fires when the checkbox loses focus. So if you tab to it, hit space a few times, tab out, you'll only get one onchange event, but several onclick events.
You should change your code to use the onclick event instead:
<input type="checkbox" onclick="Passport();" value="Passport">Passport</input>
A checkbox input will not fire any change events until the focus is lost. The input value changes everytime it's clicked.
Change onchange="Passport();" for onclick="Passport();"
Change the onchange to onclick since IE8 fires onchange when focus is lost
And adjust it based on the state of the checkbox
<input type="checkbox" onchange="Passport(this.checked);" id="passportCB" value="Passport"><label for="passportCB">Passport</label>
and the function
function Passport(state) {
document.getElementById('mydiv').style.visibility= state ? "hidden" : "visible";
}
I also added a label, so the user can click the text and toggle the checkbox state.
I have a page (demo):
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id_button").click(function(e) {
$("#id_file").click();
});
});
</script>
</head>
<body>
<form method="post" enctype="multipart/form-data" action="http://www.google.com/">
<input type="file" name="file" id="id_file" />
<input type="button" id="id_button" value="fake button" />
<input type="submit">
</form>
</body>
</html>
if
I open browse dialog via clicking "fake button", select file (I see it in input[type="file"]), than click submit button and no post happens, the input[type="file"] is cleared.
What should I changed to get it work?
I get this problem in IE8 and IE10.
PS: file input will be hidden, so user will work only with fake button.
All of the browsers have different behavior when it comes to what they allow you to do from javascript with regards to programmatically clicking the input button for file inputs.
The best solution I have found that seems to work cross browser is to set the opacity to 0 (do not use display:none) and put the button underneath the input, so the user clicks through the 0 opacity input to your button, thus firing the input select dialog.
A good writeup on styling the file input can be found here: http://www.quirksmode.org/dom/inputfile.html
http://jsfiddle.net/j38Wj Works fine in Google Chrome but does not work in IE 10.
As I think IE does not allow select file by external 'click' event.
Only one way to "customize" input[type=file] is usage of opacity style to hide it and relative positioning of custom button control below it.
Working example: http://blueimp.github.io/jQuery-File-Upload/
[...]
I think all browser does that behaviour for security reason. When you submit a form, you are redirected to a different page(or the same page) and if you are directed to the same page, the form is re-initialized.
In this case, you simply can NOT set the value of file for security reason.
From example, How to set a value to a file input in HTML?, you don't want this happen
<form name="foo" method="post" enctype="multipart/form-data">
<input type="file" value="c:\passwords.txt">
</form>
<script>document.foo.submit();</script>
Add a label tag along with the input file element. Set the 'for' attribute of the label to the id of the input file element.
Then when you click on the label the input file element will 'click' and the file dialog will open.
Then simply style the label however you like. Have tried on various IE versions.
I'm pretty new with coding, so bear with me. I've got a button on a page that, if I press on it, should make the specific text bold.
But for some reason it doesn't work and I have no clue why..
Here is an example:
HTML
<input type="button" class="btn" onclick="boldtext();" />
<br />
<div id="text">This is some text</div>
Javascript
function boldtext () {
document.getElementById('text').style.fontWeight = 'bold';
}
My problem is when I click on the button, nothing happens.
Did I make a mistake somewhere?
Write the JavaScript code in <head> tag.
Your code is working. See DEMO
If you wish to use jQuery you should create an event handler instead of using inline events
HTML
<input type="button" class="btn" id="your_button" />
<br />
<div id="text">This is some text</div>
JS
$('#your_button').click(function(){
$('#text').css('font-weight','bold');
});
Simplest jQuery solution would be
function boldtext () {
$('#text').css('font-weight','bold');
}
OR
You can make use of jQuery event handler.
$('input.btn').click(function(){
$('#text').css('font-weight','bold');
});
hope you have wrapped the above script inside <head>
<head>
<script>
function boldtext () {
document.getElementById('text').style.fontWeight = 'bold';
}
</script>
</head>
Hi,
A button which is adjacent to an input. The button is hidden by default and will be visible when the input gets focus and it will be hidden again if the input loses focus.
I wrote a code to achieve that. But the problem is button's event is not being triggered since it is hidden the moment the input loses focus.
I am not getting any idea to achieve that.Can somebody help me.
Here is the code
<html>
<head>
<style>
.icon{
visibility:hidden;
}
</style>
</head>
<body>
<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
<input type="button" class="icon" value="?" id="f4_1" onClick="alert('hi..')"/>
<script>
function onOver(f4Id){
document.getElementById(f4Id).style.visibility = "visible";
}
function onOut(f4Id){
document.getElementById(f4Id).style.visibility="hidden";
}
</script>
</body>
</html>
Note: Use pure javascript to achieve. Don't use any jQuery.
Thanks.
Actually, the order of these events varies between browsers. If I remember correctly, Internet Explorer will trigger the button if you click on it, whereas Firefox will not.
Anyway, the problem can be fixed by adding a small delay. Change your onOut function to:
function onOut(f41d) {
setTimeout(function(){document.getElementById(f41d).style.visibllity="hidden";},25);
}
Now the button will hide almost instantly. It should be unnoticeable to the human eye, but the computer can tell the difference and allow you to click the button.
Event handling is very important and understanding when they are fired is utmost important
onmousedown event will override onBlur effect of textbox ,which is what is required.
check working Example Here
<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
<input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/>
<html>
<head>
<style>
.icon{
visibility:hidden;
}
</style>
</head>
<body>
<input type="text" onFocus="onOver('f4_1')" onBlur="onOut('f4_1')"/>
<input type="button" class="icon" value="?" id="f4_1" onmousedown="alert('M Kicked')"/>
<script>
function onOver(f4Id){
document.getElementById(f4Id).style.visibility = "visible";
}
function onOut(f4Id){
document.getElementById(f4Id).style.visibility="hidden";
}
</script>
</body>
</html>
I have this code to focus a textarea when the user clicks on the "Reply" button:
$('#reply_msg').live('mousedown', function() {
$(this).hide();
$('#reply_holder').show();
$('#reply_message').focus();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div id="reply_msg">
<div class="replybox">
<span>Click here to <span class="link">Reply</span></span>
</div>
</div>
<div id="reply_holder" style="display: none;">
<div id="reply_tab"><img src="images/blank.gif" /> Reply</div>
<label class="label" for="reply_subject" style="padding-top: 7px; width: 64px; color: #999; font-weight: bold; font-size: 13px;">Subject</label>
<input type="text" id="reply_subject" class="input" style="width: 799px;" value="Re: <?php echo $info['subject']; ?>" />
<br /><br />
<textarea name="reply" id="reply_message" class="input" spellcheck="false"></textarea>
<br />
<div id="reply_buttons">
<button type="button" class="button" id="send_reply">Send</button>
<button type="button" class="button" id="cancel_reply_msg">Cancel</button>
<!--<button type="button" class="button" id="save_draft_reply">Save Draft</button>-->
</div>
</div>
It shows the reply form, but the textarea won't focus. I'm adding the textarea via AJAX which is why I am using .live(). The box that I add shows (I even add #reply_msg via AJAX and stuff happens when I mouse down on it) but it won't focus on the textarea.
A mouse-click on a focusable element raises events in the following order:
mousedown
focus
mouseup
click
So, here's what's happening:
mousedown is raised by <a>
your event handler attempts to focus the <textarea>
the default event behavior of mousedown tries to focus <a> (which takes focus from the <textarea>)
Here's a demo illustrating this behavior:
$("a,textarea").on("mousedown mouseup click focus blur", function(e) {
console.log("%s: %s", this.tagName, e.type);
})
$("a").mousedown(function(e) {
$("textarea").focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
reply
<textarea></textarea>
So, how do we get around this?
Use event.preventDefault() to suppress mousedown's default behavior:
$(document).on("mousedown", "#reply_msg", function(e) {
e.preventDefault();
$(this).hide();
$("#reply_message").show().focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
reply
<textarea id="reply_message"></textarea>
Focusing on something from an event handler that, itself, grants focus, is always problematic. The general solution is to set focus after a timeout:
setTimeout(function() {
$('#reply_message').focus();
}, 0);
That lets the browser do its thing, and then you come back and yank focus over to where you want it.
Could it be the same issue as this? jQuery Textarea focus
Try calling .focus() after .show() has completed.
$('#reply_msg').live('mousedown', function() {
$(this).hide();
$('#reply_holder').show("fast", function(){
$('#reply_message').focus();
});
});
I ran into this issue today and in my case, it was caused by a bug in jQuery UI (v1.11.4) which causes textarea elements inside of draggable/droppable elements to stop default click behavior before the textarea receives the focus click.
The solution was to rework the UI so that the textarea no longer appears inside the draggable element.
This was a particularly difficult issue to debug, so I am leaving an answer here in case others find it helpful.
It might also come from the browser. I'm doing a project in Vue, and el.focus() on textarea works in Chrome (v101), but not in Firefox (v100.0).