当前位置：首页 → 问答吧 → 想实现这样一个输入框，求高手指点

想实现这样一个输入框，求高手指点

时间：2011-11-29

来源：互联网

这是我在百度贴吧里，给吧友发信息时的输入框，想做一个这样的输入框。

想实现的是输入文字后能生成标签，且标签显示在文本框内部。主要是不懂怎么才能显示在框内啊……求高手指点

作者: nannanzt 发布时间: 2011-11-29

用开发人员工具看了一下，他的大输入框是一个span,里面有一个小的input，当输入完用户后，在input前面生成一个<span><input/></span>的结构

空白的时候

HTML code

<span class="最外面的span"><input/></span>

马N甲N号的时候：
HTML code

<span class="最外面的span"><span class="标签"><input value=马N甲N号/></span><input/></span>

作者: p2227 发布时间: 2011-11-29

可以把父容器设置为relative、新添加的元素为absolute。
HTML code

<!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>

作者: dalmeeme 发布时间: 2011-11-29

想实现这样一个输入框，求高手指点

热门阅读

热门下载