jQuery textbox, container, font selection

Page 1 of 1

1 Replies - 1134 Views - Last Post: 27 September 2011 - 12:14 AM

#1 tomala90   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 24-April 11

jQuery textbox, container, font selection

Posted 26 September 2011 - 07:07 PM

I have developed an HTML code and I want to apply jquery to it. I want to type the text in the text field and on the enter key to make this text appear in the text area and the container. Leter I will have to apply different fonts to it but for now I am just looking for help in getting the text displayed in textarea and container.
Could anyone help me do that?
any help is really appreciated

title>Text form</title>
<style type="text/css">
body {scrollbar-base-color:orange;}
</style>
        <style type='text/css'>
            div#container {
                margin: 2px;
            }
            div#float {
                background: white;
                float: left;
                border: 1px solid black;
                width: 300px;
                height: 40px;
            }
        </style
</head>
<body>
<form name="myform" action="" method="POST">
<div align="left">
<br><br>
<input type="text" size="30" value="">
<select name="country">
<option value="">Select a font</option>
<option value="arial">Arial</option>
<option value="times_new_roman">Times New Roman</option>
<option value="times">Times</option>
<option value="impact">Impact</option>
</select>
<input type="RESET" value="erase" />
</div>
</form>

<textarea style="resize: none;" rows="3" cols="35" readonly="readonly" wrap="on">
Textarea
</textarea>
        <div id='container'>
            <div id='float'>
                <p>
					This is a container
                </p>

</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery textbox, container, font selection

#2 RudiVisser   User is offline

  • .. does not guess solutions
  • member icon

Reputation: 1010
  • View blog
  • Posts: 3,566
  • Joined: 05-June 09

Re: jQuery textbox, container, font selection

Posted 27 September 2011 - 12:14 AM

That's not your completed HTML code, right? I mean, tags have been ommitted that can't be (a few <div>s)..

Anyway, aside from that what you're wanting to do is copy the contents of the textarea to the container on each keypress, so you can use jQuery's keypress event on the textarea. The easiest way to proceed is to give the textarea an ID (let's say 'myta') and then use code like the following:
$('#myta').keypress(function() {
    // This method is called when the user presses a key within the textarea
    var enteredText = $(this).val(); // Text that is currently in the textarea
    $('#container').html(enteredText); // Set the HTML of the container element to be that which is entered
});


Note that this code is very simple just as an example, and will place whatever text you enter into that box into the container div as HTML.

This is:
1; A security risk.
2; Replacing all contents of the box, including the 'float' div and <p> element.

That said, it's not difficult to work out how to change it, so with this very simple base you should be able to move on. Remember, jQuery's documentation is quite large yet simple, so if you need any help your first step should probably be there.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1