How to select the content inside a textbox when loading the page? - javascript

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.

Related

Listen to html5 autofocus

I have a html form that I want it to be autofocused when a user loads a page.
<form>
<input type=text name='username' id='input1' autofocus>
I have Javascript that is meant to add a css class( shift-up ) to the input to style it when the input is in focus.
`var x=document[forms][input1];
x.addEventListener('focus', inputFocus);
function inputFocus {
x.classList.add('shift-up');
} `
My problems:
This class is not added to the input tag when a user loads the page and yet the input field is focused. But when you click manually, then the class is added.
Is there any way I could also listen to the html5 autofocus using Javascript??
Just use the :focus selector in your CSS instead. No need for JavaScript add/remove classes.
Instead of taking use of "difficult" JavaScript code to get your <input> work. Make use of the :focus option in CSS, which already exists and is way simpler than try to code your own focus with an EventListener.
HTML Code:
<input type=text name='username' class="placeholder">
CSS Code:
.placeholder:focus{
}

How can I use setAttribute on an input without an ID or class attribute?

I have a search input tag that is being added by a jQuery plug-in:
<input type="search" />
Note that this does not have an ID, CLASS, or NAME. I need the search input tag to look like this:
<input type="search" name="myname" />
A simple solution is for me to update the jQuery plug-in. However, I do not want to do this as it will cause challenges when I upgrade this plug-in in the future.
This JavaScript works properly and adds the name attribute:
$(document).ready(function() {
document.getElementsByTagName("input")[0].setAttribute("name", "myname");
});
The problem is that the "[0]" in this function relies on the search input being the first input field in the form. I do not think this solution is sustainable.
There are other inputs in the form. This is the only one with the type attribute equal to "search." Is there a way to identify it by this attribute? Or, is there another solution you propose?
Thank you for your time!
You can use the document.querySelector:
document.querySelector("input[type='search']")
Below is an example (you can inspect the output to see name attribute):
document.querySelector("input[type=search]").setAttribute("name", "myname");
<input type="search" value="foo" />
<input type="bar" value="bar" />
You can target a selection by anything. So, the selector input[type="search"]' will work.
If you want to apply this to all input's of type search, this is good enough, and you get all of them in here:
$('input[type="search"]')
This works without jQuery too:
document.querySelectorAll('input[type="search"]')
A more targeted approach would be
document.querySelectorAll('div.filter input[type="search"]')

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/

set focus() on textbox on form onload

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

How to remove the values with jquery on deleting characters in textbox

I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page
$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle
UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.

Categories