Develop Reference

Copy Text from Input form into DIV

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

change input text field into label with input typed value inside label javascript

I want to change the text field into a label tag with input user typed text inside it. I have tried and seen many example which are working but not set value as a text in label. e.g.:
<input id="1" type="text" value="hi"/>
I want to replace this input text field with label or div tag with its innerHTML hi or the user typed value i have tried the example below but i it is not done by me.
<p id="1" onclick="wish(id)">sasdsad</p>
<script>
document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");
</scrip>

Element id should start with character not number.
With using jQuery
<input id="one" type="text" value="hi"/>
$('#one').replaceWith("<div>"+$('#one').val()+"</div>");

Or you can use like this as well, just for an alternative solution :
html
<input id="toChange" type="text" value="hi"/>
<p id="clickMe" onclick="changeTag()">Click Me</p>
jQuery
function changeTag(){
var originalForm = $('#toChange');
var div = $('<div/>',{
text : originalForm.val(),
id : originalForm.attr('id')
});
$('#toChange').replaceWith(div);
}
DEMO

Focus on first form element inside span when span is clicked

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>

Why does this input always remain clickable?

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

Auto-highlight an input field on focus

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.