0

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!

Community
  • 1
  • 1
Siv
  • 1,026
  • 19
  • 29

2 Answers2

2

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;
 
}
saqibahmad
  • 962
  • 1
  • 9
  • 18
0

I could do this by,

  • Hiding the input using
  • Add CSS to make the div look like input field (.falseInput )
  • When user selects the falseInnput the hidden Input is focused
  • The JavaScript function is fired when keyup event is used

HTML

<body>
  <input id="Input" type="text" name="Input" />
  <div class="falseInput"></div>
</body>

CSS

   /*to hide the input field use Opacity, if 
    display:none
    is used the input cannot be focused*/

    input{opacity: 0; } 

    .falseInput{ 
       //css to make div look like input feild
      // by modifying the :focus also changing styles
    }

JavaScript

//This example is used inorder to add extra markup for makinng a hashtags

  document.getElementById("Input").addEventListner("keyup", process, false);
  document.querySelector(".falseInput").addEventListner("click", function(e){
     document.getElementById("Input").focus();
   }, false);

  function process(e){
   //for processing hashtags
     var tag = { hash: 51, space:32 }
      , hashtags = false
      ,input_feild = document.querySelector(".falseInput");

     switch (e.which) {
        case tag.hashtag:

            if(e.shiftKey === true && e.keyCode == tag.hash){
                 input_field.appendChild(this.value + "<span class='highlight'>");
            }
            hashtags = true;
            break;
        case tag.space:
            if(hashtags) {
                input_field.appendChild(this.value + "</span>");
                hashtags = false;
            }
            break;
    }   

  }
Siv
  • 1,026
  • 19
  • 29