How to programmatically click on a text input using JQuery? - javascript

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();

Related

Jquery toggle input visibility on click and focus

Hello I am working on a simple form that also uses place-holder text. I am implementing this behaviour with JQuery and not html attributes, mainly because the place-holder input also shows error messages to the user which need to be styled differently than plain place-holder text.
Right now the form behaves like this.
Clicking on the input hides the the place-holder input and sets focus on the main input field.
If the user has entered data then the place-holder does not show up.
Now this is all fine, but when the user presses the TAB key to change focus, none of the above happens.
Here is the relevant JQuery code and the HTML:
$("#plh_username").click(function(){
$(this).hide();
$("#username").focus();
});
$('body').click(function(e){
var target = $(e.target);
if(!target.is('#plh_username')) {
if ( $("#username").val() == "" ){
$("#plh_username").show();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
How can I achieve the same effect when the user selects an input field without actually clicking on one?
You could try using .focus() and .focusout() instead of .click().
$("#plh_username").focus(function(){
$(this).hide();
$("#username").focus();
});
$('#username').focusout(function(){
if ($(this).val() === ""){
$("#plh_username").show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="input" id="plh_username" class="inp_placeholder" value="Username" />
<input type="text" name="username" id="username" value="" />
<input value="Press tab or shift+tab" />
Quote from the documentation:
Elements with focus are usually highlighted in some way by the
browser, for example with a dotted line surrounding the element. The
focus is used to determine which element is the first to receive
keyboard-related events.
Dont use .click(). Use .focus().
I think you are looking for onfocus event. This event triggers when a control gains the focus.
$("#plh_username").focus( function(){
alert("focus")
});
for example see http://jsfiddle.net/wb2vef0g/

BlackBerry 10 browser submits form using browser submit button when using preventDefault

As I'm working on a mobile version of our company website I ran into, what I believe is, an issue with the BlackBerry 10 browser. (I'm using the Q10, version 10.1.0.4181)
I'm using jQuery to bind to the submit event on a form to do an AJAX call, so I have a preventDefault, but it seems that BB10 seems to ignore this when using the SUBMIT button the browser provides.
It works fine when pressing the enter key or pressing the submit button of the form, but when I press the Submit button which is at the bottom of my browser (alongside with the previous/next buttons) it ignores the preventDefault (and return false) and still continues on submitting the form.
I've set up a jsfiddle which demonstrates this:
http://jsfiddle.net/e4AHZ/4/
The code I'm using to bind is:
$(function () {
$(document).on('submit', 'form', function (e) {
e.preventDefault();
alert('done!');
return false; // as final resort, no luck =(
});
});
Anyone else who had this issue? Is there a possible fix/workaround?
Thanks!
I have worked around this by adding action="javascript:void(0);" to you form (see updated fiddle http://jsfiddle.net/e4AHZ/11/).
I do not know if this is good enough but action="javascript:void(0);" is in fact part of a solution given to a similar question.
<form method="post" action="javascript:void(0);">
<input type="text" name="field1" value="some msg" />
<input type="text" name="field2" value="some msg" />
<input type="submit" />
</form>
You can also set the action to "javascript:ajaxfunction();" where "ajaxfunction()" is the function you want to call to submit the form:
$('form').attr("action","javascript:ajaxfunction();");
This should allow you to take advantage of that submit button.

HTML capture enter key and tab key

I want to prevent the enter key from submitting the form, I want it to act as a TAB key to just jump to the next field in the form or the next element.
Is this possible in HTML/JS?
if not possible to make the enter button act as a tab, is there a way to prevent the submission of the form and make only the form be submitted using the buttons on the HTML??
EDIT:
I have received a solution to this problem when I was asking for another problem!
here you can find the solution.
For accessibility/usability reasons, you really shouldn't prevent the Enter key from submitting the form (assuming the browser was going to do that anyway; IIRC, some older browsers didn't).
Assuming that you want to do this because the submit button has a click handler you'd like to happen for every form submission, you should instead move that code into a separate function and invoke it from a the form's submit event.
In jQuery, it would look something like:
$('#myForm').submit(function(e) {
if (!isValid()) {
e.preventDefault(); // Could also be `return false;` but I prefer preventDefault.
}
});
See the docs.
FYI, if you're trying to do some validation, you should check out the validation plugin.
<html>
<body>
<script>
function tmpFn(val){
if(event.keyCode=='13'){
if (val<4)
document.forms["yourform"].elements["box" + (val+1)].focus();
else
document.yourform.submit();
return false;
}
return true;
}
</script>
<body>
<form name="yourform" action="#">
<input type="text" name="box1" onkeypress="return tmpFn(1)"><br>
<input type="text" name="box2" onkeypress="return tmpFn(2)"><br>
<input type="text" name="box3" onkeypress="return tmpFn(3)"><br>
<input type="text" name="box4" onkeypress="return tmpFn(4)"><br>
<input type="submit" name="done" value="Submit">
</form>
</body>
</html>
EDIT: Refrain from using 'eval'.. Thanks Tim and Andy!
It might be possible to solve this using some jQuery - although I don't know how to imitate a keypress.
$(document).keyup(function(e) {
if(e.keyCode == 13)
{
//Code to imitate keypress of Tab key
}
});
Edit: Made a quick jsFiddle to "imitate" tab presses, which would go to the next field like you mentioned. (This one works based on the Enter key being pressed in a field)
jsFiddle
Off the top of my head, to prevent the enter button from submitting the form, don't use a submit button, rather use a <input type="button" ... onclick="submitForm();"> to call javascript to submit the form. I could be wrong, but I believe this should prevent pressing enter on any other element submitting the form.

IE8 - Enter key won't submit my search field

Hey guys, I have a search field that is not submitting when the enter key is hit, this issue is only happening on IE8, every other browser is working just fine (even IE6). Please guys I need a hand with his, find below the code I have for it.
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</div>
Ok I forgot to mention this form is in a ASP coded page, that's why it is not wrapped inside the form element.
You need to put some <form></form> tags around the textbox and button. Like so
<form method='POST' onsubmit='javascript:goSearch();return false;'>
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="button" value="" name="btn-submit" class="btn-go" onclick="javascript:goSearch();return false;" />
</form>
Another way would be to use the keydown event on the textbox and check whether it was the enter key.
Hope this helps.
I have found there to be a bug in IE8 and sometimes a form won't submit on enter key.
The best way would be to set an event to handle enter being pressed.
In jQuery you would do:
$("input_box_id").keydown(function(e){
if (e.keyCode == 13) //enter
{
$("btn-submit").click();
}
});
In JavaScript it would be:
document.getElementById("input_box_id").onclick = function(e){
var keycode =(window.event) ? event.keyCode : e.keyCode;
if (keycode == 13) //enter
{
document.getElementById("input_box_id").click();
}
};
And change Html to:
<form action="url_here" method="post">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" id="btn-submit" name="btn-submit" class="btn-go" />
</div>
</form>
Ignore the form tags if you've already got a Asp.net form.
Another way, instead of the onclick on the submit button, would be to do this.
<form action="script.php" method="post" onsubmit="goSearch();return false">
<div class="box-search">
<input type="text" class="text-box" id="text-search" />
<label class="overlabel" for="text-search">Enter keyword(s)</label>
<input type="submit" value="" name="btn-submit" class="btn-go" />
</div>
</form>
Edit: Added action and method attributes. The action attribute is required for validation.
Would it be anything to do with the fact you have an onclick event with a function call to GoSearch and a return false attached to a 'submit' input type?
Can you past the contents of the goSearch() function?
What happens if you remove the "return false;" from the event handler for the submit?
When a user hits ENTER in a text input field, IE behaves as if the submit button had been used but the "false" prevents the event bubbling.
EDIT: with new ASP information.
See this: http://mikepope.com/blog/AddComment.aspx?blogid=309 He has an explanation of how it works so no details here, except to say that all you need to do is add the following to your page_load event:
Page.RegisterHiddenField("__EVENTTARGET", "MyDefaultButton");
Old ticket, but I'd like to chime in: IE8 does the following peculiar thing: the Enter key will submit the form, but any
<input type="submit" name="MySubmitButton" value="I hope I detect THIS VALUE in POST" />
won't be sent in the POST.
IE9 changes the behavior and sends the value. Chrome has always sent the value, as far as my tests have shown.
There are a ton of "Enter not submitting in IE8" complaints out there, and I feel lots of them can be contributed to this behavior. I hope this helps some of them.

textbox should invoke button click event

I have a textbox and a button; the button click event navigates to other location in the website. I want to do the same thing on pressing the enter key but unable to do that. Please help me solve this. My code snippet follows:
function call()
{
document.location= "location.aspx";
}
<input type="text" id="txt1" onkeydown ="if(event.keyCode==13)document.getElementById('bt1').click()"/>
<input type="button" id="bt1" value ="Hit me" onclick ="call()" />
This is the same as the click, both would call this function...
onkeydown ="if(event.keyCode==13) call()"
If you can edit your HTML code, you wont probably need to do any JS to get this to working.
The INPUT fields in your HTML should be wrapped inside a FORM tag (atleast thats how it semantically makes more sense in most of the cases).
If you can do that, you can then change the INPUT element from TYPE button to Type SUBMIT and can then listen for the onsubmit event on your FORM element.
The event is fired both on pressing of enter key and click of the button and it works pretty smoothly across the browsers. The only problem is IE which doesnt fire the onsubmit event on a form with just 1 text input field. For that, you will have to insert another field into the form. You can hide it for your case. More ref at : http://style-vs-substance.com/development/form-submit-by-enter-key-and-internet-explorer/
EDIT: Code Sample
<form id="myForm">
<!--[if IE]>
<input type="text" style="display: none;" disabled="disabled" size="1" /><![endif]-->
<input type="text"/>
<input type="submit" value="Search"/>
</form>
Then in your JS:
var formHandler = document.getElementById('myForm');
formHandler.onsubmit = function(){
//this callback will be invoked both by the search button and enter key now
//your logic here
}

Categories