这是我在百度贴吧里,给吧友发信息时的输入框,想做一个这样的输入框。想实现的是输入文字后能生成标签,且标签显示在文本框内部。主要是不懂怎么才能显示在框内啊……求高手指点

解决方案 »

  1.   

    用开发人员工具看了一下,他的大输入框是一个span,里面有一个小的input,当输入完用户后,在input前面生成一个<span><input/></span>的结构空白的时候<span class="最外面的span"><input/></span>
    马N甲N号 的时候:
    <span class="最外面的span"><span class="标签"><input value=马N甲N号/></span><input/></span>
      

  2.   

    可以把父容器设置为relative、新添加的元素为absolute。
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script>
    function abc()
    {
    var text1=document.getElementById("text1");
    var button=document.createElement("input");
    button.setAttribute("type","button");
    button.setAttribute("value",text1.value);
    button.style.cssText="position:absolute;left:0;top:0";
    var div1=document.getElementById("div1");
    div1.appendChild(button);
    }

    </script>
    <body>
    <div id="div1" style="position:relative">
    <input type="text" id="text1" />
    <input type="button" value="确定" onclick="abc()"/>
    </div>
    </body>
    </html>
      

  3.   

    [Quote=引用 1 楼 p2227 的回复:]但是前面的标签应该是不可编辑的呢,input不行吧?
      

  4.   

    [Quote=引用 2 楼 dalmeeme 的回复:]这个如果二次输入的时候,生成的标签会挡住输入内容呢,怎么能控制光标的位置到不了输入框的前端呢?
      

  5.   

    <input readonly type="text" value="我不可以编辑"/>