Siv Siv - 5 months ago 15
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

contenteditable
, thats not what I wanted to know.

I have inspected facebook comment box via chrome and it shows they use an Invisible
input
box and a
div
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
    input
    can be hidden and the things that user enters shows up in the
    div

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

  3. I want to know how to implement this technique with an
    input[type=text]
    and
    div



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

Answer

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 ) {
     event.preventDefault();
  }
  $(".div").html($(this).val());// you can play with this
  $(".input").val($(this).val());
});
 

For more details visit jquery doc page http://api.jquery.com/keypress/

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

Comments