Develop Reference

Autosize a textarea without focus

Currently I have the following code for autosizing my textarea:
$('textarea').bind('input propertychange', function() {
$(this).height(50).height(Math.min(370, this.scrollHeight));
});
This works fine while I am in the textarea and change the text by pressing some keys.
What I need is a possibility to do the same when setting the text of the area by JavaScript and while the textarea is not focused. Only executing the same code in the callback (ofcourse with right scope) doesn't works - height gets zero.

after executing your callback function fire the propertychange function
$('textarea').trigger('propertychange');

with a change and a trigger
$("#i").on('change', function(){
this.style.color = 'red';
});
function f(){
$('#i').trigger('change');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="i" value="hello" /><br>
<button onclick="f()">Run</button>

my jquery solution is :
$(document).ready(function(){
$("textarea").each(function(){
$(this).height(($(this)[0].scrollHeight) + "px");
});
$("textarea").keypress(function(){
$(this).height(($(this)[0].scrollHeight) + "px");
});
})
JSFiddle

You may try to trigger the event
$('textarea').on('input propertychange', function() {
$(this).height(50).height(Math.min(370, this.scrollHeight));
});
$('textarea').trigger('propertychange');
//If you change textarea content with html() or append you could try something like that
$('textarea').html(somecontent);
$('textarea').height($('textarea').scrollHeight);

jQuery change value of input and display it as text

I'm struggling with the following problem. I have input text element. I want a user to enter something there and then his value appears as a normal text (the input should disappear).
I searched for a few solutions but nothing worked for me. What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?):
$('input.modified').on('input', function(){
(this).append('<p>some</p>');
});
OR
$("input.modified").bind("propertychange change keyup paste input", function(){
$(this).append("<p>dgdgd</p>");
});
OR
$("input.modified").change(function(){
$(this).css("visibility","hidden");
}); //end change function
How to make functions like .on() or .change() work with my code?
thanks for all the answer, but I can't move your examples to my code :(
Please verify this fiddle what I'm missing:
[http://jsfiddle.net/w6242/][1]

Check this DEMO
HTML:
<input class="modified" type="text"/>
<p></p>
JS:
$("input.modified").change(function(){
$('p').html($(this).val());
$(this).css("visibility","hidden");
});

check this
Fiddle
$("#in").focusout(function(e){
$("span").html(($("#in").val()));
$(this).hide();
});

Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/
HTML
<div id="wrapper">
<input type="text" id="writer" />
send
</div>
JQuery
$("#submit").click(function(e){
var txt = $("#writer").val();
$("#writer").fadeOut(400);
$("#submit").fadeOut(400, function(){
$("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
});
e.preventDefault();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element

At its simplest, assuming you really want to replace the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
JS Fiddle demo.
Or, to insert an adjacent element and simply hide the input:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
JS Fiddle demo.
The above jQuery works with the following demonstrative HTML:
<input id="demo" type="text" />
References:
after().
hide().
on().
replaceWith().

onchange text of textbox display on another textbox

I want to display changing text into another text box
I tried here for evey possible combination. But didn't work.
/*$('input#list_val').keyup(function() {
//perform ajax call...
// alert("Hello");
$('#list_v').text($(this).val());
});*/
$('input#list_val').keydown(function() {
//perform ajax call...
//alert("Hello");
$('#list_v').text($(this).val());
});
<input type='text' id="list_val" />
<input type='text' id="list_v" />

It should be val() for adding value to input and use keyup rather than keydown to show value in other input immediately
$('input#list_val').keyup(function() {
$('#list_v').val($(this).val());
});
Demo Fiddle

use .val() and .keyup (using keydown doesn't register the newest value, it registers the value before so keyup is better to use for this)
$('#list_val').keyup(function() {
$('#list_v').val(this.value);
});
DEMO

change from :
$('#list_v').text($(this).val());
to:
$('#list_v').val($(this).val());

var $list_v = $('#list_v');
$('input#list_val').keyup(function() {
$list_v.val($(this).val());
});
Demo: Fiddle

Try This
js
$('#list_val').keyup(function() {
$('#list_v').val($('#list_val').val());
});
Demo

Try this:
$('input#list_val').keydown(function() {
var text = $("input#list_val").val();
$('#list_v').html(text);
});

Your code is perfect, Just need to change small things in your code :
$('#list_val').keydown(function() {
$('#list_v').val($(this).val());
});

Change the div color on input focus

What am trying is to change the color of the div with letter s
<div class="search_container">
<input type="text" class="search_field" placeholder="Search..." />
<div id="magnify_glass">s</div>
</div>
What I tried is this
<script>
$('.search_field').focus(function() {
$('#magnify_glass').css('color','#ff0000');
});
</script>

Assuming your code is in the <head> of the document, you just need a document ready handler. Try this:
Update
To remove the colour you need to add a blur handler too.
<script>
$(function() {
$('.search_field').focus(function() {
$('#magnify_glass').css('color','#ff0000');
}).blur(function() {
$('#magnify_glass').css('color','transparent'); // or whatever the default is.
});
});
</script>
Also, it's better to use a class to add styling to an element as it's a better separation of concerns:
.focus { color: #F00; }
$('.search_field').focus(function() {
$('#magnify_glass').addClass('focus');
}).blur(function() {
$('#magnify_glass').removeClass('focus');
});

You code is fine and working you need to ensure you have the code in document.ready to ensure the element availability before accessed by script and you have jquery library added.
Live Demo
$('.search_field').focus(function () {
$('#magnify_glass').css('color', '#ff0000');
}).blur(function() {
$('#magnify_glass').css('color', '#000000');
})

change div text on radion button click

I want to put the radio button value in the status div. The text of status div should change, according to the radio button selected by the user.
The code that I used bellow is not working. Please help. Thanks!
HTML code:
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<div id="status"></div>
</form>​
JS code:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked');)
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type='radio']:checked').val()
$('#status').text(RadioStatus);
});
});

This should work:
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});

A few minor adjustments to your code got it to work just fine:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked'))
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type="radio"]:checked').val();
$('#status').text(RadioStatus);
});
});​
see: http://jsfiddle.net/f6Tru/
..or you can really simplify it by using techfoobar's:
$(document).ready(function () {
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});
});​
instead. see: http://jsfiddle.net/RrhYM/

You have a problem in your single quotes '
Change:
RadioStatus= $('input[type='radio']:checked').val()
To:
RadioStatus= $('input[type="radio"]:checked').val()

Try this code
$('input[name ^=sex]').click(function() {
$('#status').text($(this).val());
});

demo
$("input:radio").click(function() { //use $("input:radio[name='sex']").click if more radio buttons there
$('#status').text($(this).val());
});​

Simply use change to determine that a radio button is selected. Then use html or text to append the value of chosen radio button to your <div id="status">.
$(document).ready(function () {
$('input[type=radio]').on("change", function() {
$('#status').html($(this).val());
// Alternative
// $('#status').text($(this).val());
});
});​
DEMO

You may achieve that with the following JS code :
$("input").click(function(e){
var selectedValue = e.currentTarget.value;
$('#status').html(selectedValue );
});
​
​