I can't figure out how to focus on the first form element inside a span when the span is clicked. I've included my code, I had also messed around with 'closest' but had no luck.
<form>
<span>
<input id="content" type="text">
<label for="content">Content</label>
</span>
</form>
$('span').click(function() {
$(this).find('input').focus()
});
Any help is appreciated.
Before answering your actual question: there is a way to achieve what you're trying to do which doesn't even require any JavaScript.
If you wrap your input field in the label tag, clicking the label will automatically give focus to the field.
<form>
<label>
Content
<input id="content" name="content" type="text">
</label>
</form>
If you insist on doing it through JavaScript/jQuery, you'll have to make sure you only attach the click handler after the DOM is ready:
$(document).ready(function () { // Or equivalent: $(function() { ... });
$('span').click(function () {
$(this).find('input:first').focus(); // :first makes sure only the first input found is selected
});
});
why not use the label to trigger this functionality
the span will only cover the label and input so if i understand correctly you want the focus to be set on the input even when the user clicks the lable which can be achieved like so:
<form>
<span>
<input name="content" id="content" type="text">
<label for="content">Content</label>
</span>
</form>
But if you are trying to do something else then:
$(document).ready(function(){
$('span').click(function() {
$(this).find('input:first').focus();
});
});
Make sure your js is called after the DOM is loaded
<script type="text/javascript">
$(function(){
$('span').click(function() {
$(this).find('input').focus()
});
});
</script>
Related
I've looked at the docs and I'm having trouble other finding information on this method, I think it handles an event where text is added or changed in a text input or text area. however, cant get it to work. I'm hoping someone can further explain this event handler to me.
<input id="first" type="text">// if something is typed here an event should be triggered
//at least if my understanding is correct which it clearly isnt
<input id="second" type="text">//hello should appear here when the event is triggered
<script>
$("#first").select(function(){$("#second").val("hello")})//this does nothing
</script>
Based on the official documentation of jquery for .select(), here's definition for what it does and an example to demonstrate.
Official Description
Bind an event handler to the "select" JavaScript event, or trigger
that event on an element.
which means you are trying to do some operation of targeted element when you select text in source element. Watch out the comments for what it's doing.
//always good to wrap events inside document.ready
$(function() {
$("#first").select(function() {
//once you perform select operation on input#first element either by Ctrl+a
//or by Mouse drag event
$("#second").val("hello");
//value of input#second element should be updated to hello
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first" type="text">
<input id="second" type="text">
$.select() works when you select text inside of a text or textarea element. Meaning when you "highlight" text with the mouse. Try it below:
$("#first").select(function() {
$("#second").val("hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>First:</div>
<input id="first" type="text" value="select this text">
<div>Second:</div>
<input id="second" type="text">
If you want to hook into additions, you can use something like jquery's on input instead:
$("#first").on('input', function() {
$("#second").val("hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>First:</div>
<input id="first" type="text">
<div>Second:</div>
<input id="second" type="text">
<body>
<input id="first" type="text">
<input id="second" type="text">
<script>
$("#first").change(function() {
$("#second").val("hello")
})
</script>
</body>
You are misunderstanding the select method. It is used when text in an input element is selected. Your comments indicate that you want the code to be triggered when something is typed.
For that, you should use the input event if you want to trigger a function when input is received in the element.
Also, your function didn't include a # in front of the second reference, so you were not correctly accessing that element.
$("#first").on("input", function(){
$("#second").val("hello")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="first" type="text">
<input id="second" type="text">
I want to create 1 input field and one Div.
When u write text in the Input and hit the button i want the text to be displayed in the DIV. Its so simple but it just won't work.. i hope someone can do this easy task for me.
I tried last:
<form>
Bearbeitungstext: <input id="textInput" type="text"><br>
<input type="button" value="text einbinden" onclick="$('texxxt').val($('#textInput').val())">
</form>
<div id="texxxt">
</div>
Try to use id selector properly,
$('#texxxt').text($('#textInput').val());
Also you have to use .text() instead of .val(), .val() is not a function for div elements. It is for form elements which are having value property.
And the best approach for your case would be binding an explicit event handler,
var div = $("#texxxt"),inp = $("#textInput");
$("form button").click(function(e){
e.preventDefault();
div.text(inp.val());
});
This can be done with php $_GET($whatever); also, to do this you will need the name="whatever" on the input field.
Bearbeitungstext:
<input id="textInput" type="text"/><br>
<input type="button" value="text einbinden" onclick="$('#texxxt').html($('#textInput').val())"/>
<div id="texxxt">
to change DIV content we use html() not val()
I have simple textbox:
<input id="textbox" type="text" style="height: 100px; width: 500px" value=""></input>
Now I need to copy text, which was entered to textbox to div which will be after textbox. Maybe you could say, how can I do it? There can be submit button or text could be copied automatically and text box would disappear.
use .keyup() in JQquery
$(document).ready(function(){
$('#textbox').keyup(function(){ //triggers when keyup in textbox
var txtBoxVal =$(this).val();
$('#textVal').text(txtBoxVal); //assigns value to your div
});
});
FIDDLE
add $(this).hide('slow');
Updated Fiddle for hide of text box, (i'm not sure about your implementation with this)
try,
var cache = $('#textbox');
cache.next('div').text(cache.val());
Try this instead,
Jquery:
$('#textbox').keyup(function(){
$('#content').text($('#textbox').val());
});
HTML:
<input id="textbox" type="text"/>
<div id="content"></div>
JsFiddle
Say that you have added a button with id="submit", then you could achieve this with the following way:
$('#submit').onClick(function(){
var text = $("#textbox").val();
$("#textbox").hide();
$('#divId').html(text);
});
The divId is the id of the div, in which you want to append the text that entered in the textbox.
Here is an inline solution (uses jquery)
<input id="textbox" type="text" style="height: 100px; width: 500px" value="" onchange="javascript:$(this).next('div').text($(this).val())" />
you can use the same on the onkeypress instead of onchange to apply text to div immediately.
Basically i want the outer div to take all events, so the input and anything else in the div is not clickable:
<div id="div1">
<div id="div2">
<label>Input 1</label>
<input type="text" id="input1" />
</div>
</div>
$(document).ready(function() {
$(document).on('click', '#input1', function(e){
e.preventDefault();
};
});
Here's the non-working example http://jsfiddle.net/KFWmk/3/
Any help appreciated :)
In newer jQuery (1.6+):
$('div input').prop("readonly", true);
This sets the HTML readonly property to true for all inputs in a div.
Please note that using .attr() to set properties (attributes with boolean values of on or off) has been deprecated in jQuery.
First of all bacause you havn't included the jQuery library.
Second bacause you have a type-o.
Third because the the focus is emitted before the click event. (Prove)
If you want to make an input field not editable you can use:
$("input").prop("readonly", true);
or simply when you create the input field in html:
<input readonly type="number">
If you want to prevent focus on an input field you can use:
$("input").on("focus", function() {
$(this).blur();
});
$('div input').attr("readonly", "readonly");
you can make all input fields in the div as read only.
You can try like this
$(document).ready(function() {
$('div input').prop("readonly", true);
});
I was wondering if there was a way for text inside a input box (pre loaded using value="") to highlight when the user clicks on it?
input type='text' name='url' id='url' value='http://www.a-link.com/' />
EDIT
I need the text to he highlighted so the user can copy it.
<input type="text" name="textbox" value="Test" onclick="this.select()" />
You could attach javascript to the click event to select the text like so:
$(document).ready( function() {
$('#id').click( function( event_details ) {
$(this).select();
});
});
There is a potential issue where the user could be trying to click at a later point in the text to correct a typing mistake and end up selecting the whole thing. A better way would be to trigger this when the input gets focus from the user. you'd replace .click with .focus in the example above.
jQuery event documentation:
http://api.jquery.com/category/events/
Add the following onclick attribute to make the entire <input> automatically highlight when the user clicks on it:
<input type="text" value="Test1" onclick="this.select()" />
Alternatively, if you want the user to be able to change the selection after the initial click, change the onclick attribute to an onfocus attribute. This will also highlight the entire <input> when the user clicks on it, but it allows them to change the highlighted part manually afterwards:
<input type="text" value="Test2" onfocus="this.select()" />
Here is an example of both inputs in action.
You want to use focus property. Like this: http://jsfiddle.net/sCuNs/
html
<p><input type="text" size="40"></p>
css
input:focus, textarea:focus{
background-color: green;
}
Do you mean to select the text?
Use onclick event to fire the code:
document.getElementById("target-input-id").select();
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
$('#foo').on('mouseup', function(e){
e.preventDefault();
$(this).select();
});
This should do it:
<input type='text' name='url' id='url' onclick="this.select()" value='http://www.a-link.com/' />
<input id="inputField" type="text" size="40" value="text to be highlighted"></p>
document.getElementById('inputField').focus();
The default behavior for focus selects the text in the input field. I was looking for a solution not to do that when I found this.