Fatal编程技术网
  • javascript/
  • Javascript 如何使输入字段显示实时标记

Javascript 如何使输入字段显示实时标记

javascript html css

Javascript 如何使输入字段显示实时标记,javascript,html,css,textbox,Javascript,Html,Css,Textbox,我想知道如何创建一个输入文本字段，就像facebook或twitter中的一个字段，其中文本微笑被转换为图形，并且能够添加额外的标记 我还问过其他问题，如 所以我知道如何使用contenteditable创建一个可编辑的div，这不是我想知道的 我通过chrome查看了facebook的评论框，它显示他们使用了一个不可见的输入框和一个div来显示输出 我删除了facebook类，并添加了一些我自己的风格来查看输入框 所以我想知道的是 如何隐藏输入，以及用户输入的内容显示在div中 当用户关注

我想知道如何创建一个输入文本字段，就像facebook或twitter中的一个字段，其中文本微笑被转换为图形，并且能够添加额外的标记

我还问过其他问题，如

所以我知道如何使用
contenteditable
创建一个可编辑的div，这不是我想知道的

我通过chrome查看了facebook的评论框，它显示他们使用了一个不可见的
输入框和一个
div
来显示输出



我删除了facebook类，并添加了一些我自己的风格来查看输入框

所以我想知道的是


  • 如何隐藏
    输入
    ，以及用户输入的内容显示在
    div中
    • 

  • 当用户关注
    div
    • 

  • 我想知道如何使用
    输入[type=text]
    和
    div
    • 

    一般来说，如果解释添加散列标记方法将非常有用。谢谢
     您可以使用jQuery的按键事件进行输入，并且可以更新任何div或隐藏的输入元素
    


    $（“#目标”）。按键（功能（事件）{
if（event.which==13）{
event.preventDefault（）；
}
$（“.div”）.html（$（this.val（））；//您可以使用它
$（“.input”）.val（$（this.val（））；
});

    我可以通过
    

      

    • 使用
      • 

    • 添加CSS使div看起来像输入字段（
      .falseInput
      ）
      • 

    • 当用户选择输入时，隐藏的输入被聚焦
      • 

    • 当使用keyup事件时，会触发JavaScript函数
      • 

    
HTML
JavaScript

    //此示例用于添加额外标记以生成哈希标记
document.getElementById（“输入”）.addEventListner（“键控”，进程，false）；
document.querySelector（“.falseInput”）.addEventListner（“单击”，函数（e）{
document.getElementById（“输入”）.focus（）；
}，假）；
功能流程（e）{
//用于处理哈希标记
var标记={hash:51，space:32}
，hashtags=false
，input_feild=document.querySelector（“.false输入”）；
开关（e.which）{
case tag.hashtag：
if（e.shiftKey==true&&e.keyCode==tag.hash）{
输入_field.appendChild（this.value+“”）；
}
hashtags=true；
打破
case tag.space：
if（hashtags）{
输入_field.appendChild（this.value+“”）；
hashtags=false；
}
打破
}   
}

    我对反向工程Facebook评论框感兴趣！你知道他们如何将文字微笑转换成图形并制作哈希标签吗。我想要原始javascriptyou不想使用jQuery？通过jQuery，您可以将文本笑脸转换为图形访问此url：如果您不想使用jQuery，请告诉我，我会尽力帮助您我已经添加了一个用于键控的JavaScript，请检查是否有效！

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

    

       /*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
    }

    

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

  }