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/
Related
I have several html input controls on a page and a search button. When user is outside the input controls, ( ie focus is not inside the input control) and if user press enter, i want to trigger click event of search button. The search button is not a Submit button and it is not inside a form
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>
currently I am doing this
$(document).keypress(function (event) {
if (event.keyCode === 13) {
$("#btnSearch").click();
}
})
However, the above code triggers click event every time user clicks enter.
Some of the input controls I have are custom autocomplete controls. Auto complete control shows multiple options as soon user starts typing something. Then user can select the option by using mouse or by pressing enter.
I don't want to trigger the click event of a search button when user press enter to select an option.
Just make sure that the autocomplete element isn't the source of the enter press. From the demo you give in your question, this will work. However, if it is slightly different in your use case, you may need to adjust the class name or selector to make sure it is preventing the correct target element
$(document).keypress(function (event) {
if (event.keyCode === 13 && !$(event.target).hasClass("autocomplete")) {
$("#btnSearch").click();
alert('btnSearchClick');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input1" />
<input type="checkbox" id="input2" />
<input type="text" class="autocomplete" id="input3" />
<button type="button" id="btnSearch">Search</button>
Alternatively, since events propagate out, if you can prevent the propagation of the autocomplete event in whichever library you are using, that may work as well.
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();
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'm working on an application, and I want a text field to be selected when the page is loading so that when a user uses Ctrl + v it paste the content inside the textbox. Any one knows how to do that?
the text field is
<div>
<input wicket:id="email-address" type="text" id="textbox-email" />
</div>
Thanks!
3p3r answer is of course perfectly right. If you want this to be reusable and contolled via wicket, than please check the wicket wiki page.
You can use HTML5's autofocus attribute:
<input type="text" autofocus />
Works of course for just one field.
you should set focus to your input:
document.forms['your_form'].elements['your_textbox'].focus();
For your example above:
document.getElementById('textbox-email').focus()
After it gained focus, you should select it:
either add this onfocus attribute to your inputs (better)
<input type="text" onfocus="this.select()" />
Or use this jQuery snippet (best):
$(document).ready(function() {
$("#textbox-email").focus(function() { $(this).select(); } );
});
Pure Javascript:
var element = document.getElementById('textbox-email');
element.onfocus = function() {element.select();}
document.getElementById('textbox-email').focus();
Add the whole thing to window.onload or onload attribute of body tag.
I have a simple login form with 2 input fields: "username" and "password".
"username" field is focused by default. The problem is that when user clicks outside "username" or "password" fields, the focus is gone (it is neither on "username" nor on "password" fields"). How can I force the focus to be on these 2 fields only ?
In my case, this is a really annoying behavior, so I really want to do this :)
Can I do something like:
$("*").focus(function() {
if (!$(this).hasClass("my_inputs_class")) {
// How to stop the focusing process here ?
}
});
?
It sounds like you always want one of your inputs to be focused, fair enough. The way I would do this is to bind each of your inputs blur() events so that if it occurs, it goes to the next element.
Here's the markup:
<body>
<form method="POST" action=".">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" name="submit" />
</form>
</body>
And here's the jQuery:
$(document).ready(function() {
// what are the named fields the user may focus on?
var allowed = ['username', 'password', 'submit'];
$.each(allowed, function(i, val) {
var next = (i + 1) % allowed.length;
$('input[name='+val+']').bind('blur', function(){
$('input[name='+allowed[next]+']').focus();
});
});
$('input[name='+allowed[0]+']').focus();
});
You could use javascript to set the focus on focusout, but you really shoudn't. Forcing focus on those fields would break the normal interaction of the page. It would mean a user couldn't do something as simple as clicking on a link on the page, because focus would always be on those inputs.
Please don't do it :)
If you really really want to do this (and you shouldn't) use delegate() instead of setting a separate event handler on every single HTML element:
$('body').delegate('*', 'focus', function() {
if (!$(this).hasClass("my_inputs_class")) {
$('#username').focus();
return false;
}
});
But consider that this will make unacessible all elements except the two input fields via keyboard navigation (including the submit button, any links on the page etc.)
Set blur event handler so it brings back focus to one of your inputs.
You could do like this (in psuedo code):
if user || pass blured
if user.len > 0
pass.setFocus
else
user.setFocus
Hope you get it.
Install an onClick handler on the body element (or a div that covers most of the page). Clicking on the div should then set the focus on the username/password field.
I also suggest to bind Return in the "username" to "Set focus on password" and Return in the "password" field to "Submit form".
You could enable the click on links by re-focusing on you inputs after a minimum time interval.
Every time an object gains the focus you check if it has the required class: if not set the focus to the first of the form inputs; this way:
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" />
<script type="text/javascript" >
$(function() {
$('*').focus(function() { var obj = this; setTimeout(function () {checkFocus(obj)}, 1)});
})
function checkFocus(obj) {
if (!$(obj).hasClass('force_focus')){
$('input.force_focus:first').focus()
}
}
</script>
</head>
<body>
Extrnal link
<form><div>
User: <input type="text" name="user" class="force_focus"/><br/>
Password: <input type="password" name="password" class="force_focus"/><br/>
Other: <input type="text" name="other" class=""/><br/>
<input type="submit" name="submit" value="Login" />
</div></form>
</body>
</html>
this is only an idea, you can use a setInterval function to put the focus in the username field, and you can interrupt it when you want with clearInterval function.
var A = setInterval(function(){ $('#username').focus();}, 100);
... and for interrumpt it, you can do something like this
$('#password').focus(function(){ clearInterval(A);});