This is the js code:
$(document).ready(function() {
$("#test1 ,#test2").blur(function() {
alert("Blur of text box");
});
$("#buttonClick").click(function() {
alert("Button clicked");
});
});
HTML code:
<input type="text" name="test1" id="test1">
<input type="text" name="test2" id="test2">
<input type="button" value="Click" id="buttonClick">
Here the blur event & click event working fine separately but when the not in conjunction
what I mean is ex: if I write something in text box and click on button then
blur event gets called but the click not triggers
Any idea why this is happening, and what could be the solution for this?
Thanks in advance!
alert() pauses the execution of the rest of your script until the alert pop-up is closed. Use console.log() instead.
Related
I'm trying to implement a messaging application in my game, so instead of clicking on the input text field manually, I want users to only press "enter", write something, then press "enter" again to submit.
For some reason, when I do this (press "enter"), the onclick alert fires from the input, but the input stays the same, I am still not able to type into the input form. If I manually click it, it works fine.
Am I missing something?
HTML
<form id="messageInput" action="">
<input id="m" autocomplete="off" maxlength="100" onclick="alert('clicked')"/>
</form>
JAVASCRIPT
if(keyOn["enter"]){
keyOn["enter"] = false;
$('#m').click();
console.log("clicked");
}
$('#m').click(function() {
alert("click")
}).click();//click here to click automatically on load
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="messageInput" action="">
<input id="m" autocomplete="off" maxlength="100" />
</form>
Using jquery you can call .click()
Thank you all for your help, but I somehow found the solution by randomly checking everything I saw:
$("#m").trigger("focus");
Use focus instead of click
The code you've written is for capturing the click event ($("#m").click()).Try:
$("#m").trigger("click");
Try like this..press enter.Event will trigger.
if(confirm('Are you want submit message?')){
$("#m").keyup(function(event){
if(event.keyCode == 13){
alert('clicked');
$("#m").val('');
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="messageInput" action="">
<input id="m" autocomplete="off" maxlength="100" />
</form>
I was having the same issue in an Angular app where the "click" would fire and open something from the element but it wouldn't do any of the angular method calls I had defined in (click)="...", I also found it wouldn't fire off anything defined in onclick()
The solution for me was to add .get(0)
$(el).get(0).click();
When I input some text in an <input type="text">, and the text matches some previously input text, the browser will present a dropdown and I can reuse that text.
But which javascript event will the input receive when that text is selected?
onkeydown/onkeyup does not trigger
onchange does not trigger.
In Firefox, it seems like onselect is triggered, but not in chrome. However, that event is used for other purposes.
onclick does not trigger.
onblur is as usually only triggered when the input loses focus.
There is an interesting event named input:
JSFiddle example.
Html:
<form>
<input id="text" name="text" type="text" />
<input type="submit" value="Sumbit" />
</form>
Script:
$(document).ready(function()
{
$('#text').on('input', function()
{
console.log('Changed to ' + this.value);
});
});
Actually I'm trying to set focus on text-box when focus is lost.The reason behind this is that there is requirement to forcefully set focus on text-box if some validation fails(like empty field validation) and validation is perform on blur event of that text box.
I have tried it on fiddle also but it seems like focus is there but cursor is not blinking.
Please refer link : http://jsfiddle.net/zHeJY/
Please let me know the reason behind this and solution for same.
Thanks in advance.
First: This is a bad idea to trap user inside an input unless validation passes! Users should be allowed to focus whatever they want. Ideally, you can prevent a form submission if validation fails.
Problem: (1) You don't have any other element in the fiddle you provided. (2) You are not validating anything, just doing an endless loop for blur-focus cycle!
Solution:
See this fiddle: http://jsfiddle.net/zHeJY/7/
With a proper validation routine in place (and another element available), it will work.
HTML:
<input id="setFocus"/>
<input id="other" />
JS:
$("#setFocus").on("blur", function(e) {
if (! validate(this)) {
$(this).focus();
}
});
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$( document ).ready(function() {
$(document).on('blur', "#setFocus", function (e) {
$(this).focus();
});
});
</script>
</head>
<body>
<input type="text" id="setFocus"/>
<input type="text" id="set"/>
</body>
</html>
try this
HTML
<div id="something">
<input type="text" id="setFocus"/>
<input type="text" id="setFocus1"/>
</div>
JS
$("#something").mouseup("blur",function(){
$(this).children(":first").focus();
})
you should have parent element for this on click of any where you will get the required result
I have a structure of the following format , which I display in a Bootstrap modal.
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$(".jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
In Firefox, Chrome and IE when I press Enter/Return key after filling the inputs, the button click is triggered.
But in Safari [v4.0.3] , it doesn't trigger the button click! Rather it seems to postback to the same page.
Is this a known issue in Safari?
If yes, any workaround?
If no, could someone please help me with figuring out the root problem?
P.S. :
1. I'm familiar with the Javascript code for triggering button click on Enter keypress event. Just curious as to why the above won't work only in Safari.
2.Just for clarification, pressing Enter key while I'm still on the input control and not by pressing tab to first focus on the button and then press Enter.
Add the input fields and buttons to a form.
try using this but i m not sure about this is the right way to do it.
in that case you better add two js listener functions to the input fields. as
`
<div>
<input id="one" type="text"/>
<input id="two" type="text"/>
<button class="jSomeButton" onclick="javascript: return false;"> </button>
<!--Click event handled in Javascript code-->
</div>
$('#one').keypress(function(e){
if(e.which == 13) {
//call your code
}
});
$('#two').keypress(function(e){
if(e.which == 13) {
///call your code
}
});
better you write three listeners one for button other two for two input files. hope this ill help you. i am not sure about this solution. please let me know after trying it.
Instead of class attribute use id attribute onclick event ,
<div>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" id="jSomeButton" onclick="javascript: return false;"></button>
<!--Click event handled in Javascript code-->
</div>
$(function(){
$("#jSomeButton").on('click',function(){
//Called from Firefox, Chrome and IE
//Not called from Safari
});
});
if you do not want to add ID you can delegate event to the document so event will work on DOM which has defined class.
Example
<script type="text/javascript">
$(function(){
$(document).on('click', ".jSomeButton" ,function(){
alert('works');
});
});
</script>
#Vandesh,
As posted in comments, I suggest you put up a form tag around your entire form.
Have a look at this JSFiddle for more idea.
http://jsfiddle.net/JUryD/
I tried this on Safari, Chrome, IE6+, Opera and Firefox 22+
Let me know if you face any other troubles.
Here is the code:
<div>
<form>
<input type="text"/>
<input type="text"/>
<button class="jSomeButton" onclick="javascript: return false;">Send</button>
</form>
</div>
I am trying to set focus on a textbox in a form that's a part of jQuery tree. Here is my code
$(document).ready(function() {
$("#search").focus();
});
HTML:
<div>
<form action="search" method="post" name="frmSearch>
<label for="search">Search:</label>
<input type="text" name="search" id="search" />
<input type="submit" name="button" value="Search" />
</form>
</div>
When I click on Search tab in the tree, it won't set focus on the textbox. Can someone let me know what's wrong in the code?
You're focusing the textbox on page load, however as soon as you click anywhere else on the page (such as a tab), the focus will be removed from the textbox and given to whatever you just clicked.
Instead of focusing on page load, attach a click listener to your tab so that when it is clicked the search textbox gets focus. Since I haven't seen all your markup, I'm using #mySearchTab as a placeholder for the ID of your search tab:
$(document).ready(function() {
$("#mySearchTab").on('click', function() {
$('#search').focus();
});
});
Also, don't forget to close your functions with a ).
I'm not sure what your tree looks like but here's a working demo using jQuery tabs.
try following:
$(function(){
$("input:first:text").focus();
});
working fiddle here: http://jsfiddle.net/8CTqN/2/
tested on chrome
I made some modification in your js codes
http://jsfiddle.net/8CTqN/5
$(document).ready(function(){
$(function(){
$("#search2").focus();
});
});