Siv Siv - 1 year ago 71
CSS Question

How to make input field to show real time markups

I want to know how to make a input text field like the one in facebook or twitter where text smiles are converted into graphics and the ability to add extra markup.

I have gone through other stackoverflow questions like

How do I make an editable DIV look like a text field?

So I know how to make an editable div using

, thats not what I wanted to know.

I have inspected facebook comment box via chrome and it shows they use an Invisible
box and a
to show the output

I have removed facebook classes and added some my own styles to see the input box

I have removed facebook classes and added some my own styles to see the input box

So what i want to know is

  1. How the
    can be hidden and the things that user enters shows up in the

  2. How to make the hidden
    field to be selected when the user focus on

  3. I want to know how to implement this technique with an

In General It would be much helpful if adding a hash tag method is explained. Thanks!

Answer Source

You can use keypress event of jQuery for input and you can update any div or hidden input element

$( "#target" ).keypress(function( event ) {
  if ( event.which == 13 ) {
  $(".div").html($(this).val());// you can play with this

For more details visit jquery doc page

For css tell me in details what you want to do i will explain it

With Javascript:

//Add this on input
onKeyDown="keyCounter(this,'div id')" 

function keyCounter(field,cntfield) {
	var fval=field.value;
	//this is the div you can play around
	document.getElementById('cntfield').innerHTML  = fval;

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download