How to set new content beside input field?

Forum Moderators: open

Message Too Old, No Replies

How to set new content beside input field?

toplisek

4:33 pm on Jan 22, 2012 (gmt 0)

How to set new content beside input field using jQuery.

Check sample textarea like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
</head>

<body>
<div>
<textarea required="" onchange="handleInput(this);" onkeyup="handleInput(this); " tabindex="6" cols="30" rows="15" class="" name="" id=""></textarea>

</div>
</body>

</html>

How to set jQuery trigger for this?
Example: when user moves inside input field it will show him on the right hand side also some bordered content.

ZakAltF4

5:10 pm on Jan 24, 2012 (gmt 0)

I am not sure what you are tying, but if I understand correctly, could you not do something like this?


<head>
< INCLUDE FOR JQUERY LIBRARY >


<script>
function handleInput(){
var my_txt;
my_txt = document.getElementById('TxtIn').value;
document.getElementById('label').innerHTML = my_txt;
}
</script>


</head>

<body>
<textarea required="" onchange="handleInput();" onkeyup="handleInput(); " tabindex="6" cols="30" rows="15" class="" name="TxtIn" id="TxtIn"></textarea> <span id="label"></span>
</body>

You can do nearly anything with SPAN label at this point ...

append:

$('#label').append('<span style="....." .... ');

show/hide:

$('#label').fadeIn('fast');

replace html contents of

$("#label).html('');

change CSS ...

$("#label).css('backgroundColor','#ffffff');

pretty powerful stuff

-- Zak