当前位置: 代码迷 >> HTML/CSS >> 文本框里的文字加下划线,该怎么解决
  详细解决方案

文本框里的文字加下划线,该怎么解决

热度:946   发布时间:2014-02-23 23:09:50.0
文本框里的文字加下划线
文本框里的文字加下划线,
效果图:

每一个名称加下划线和分号,删除的时候是按每个名称删除,而不是一个字符一个字符地删。
如何实现,谢谢!!<a>中间名称</a> 控制a的样式不就有下滑线了嘛。。。

删除当然是删除这个a咯。你要是想要某某网站的效果,建议你仔细研究下他们的源代码。 你说的网站别人未必使用

firebug,yslow都是很好的查看代码的工具顶起!用css实现。。。嗯  可以
本帖最后由 net_lover 于 2011-10-10 11:32:12 编辑
引用:
我在騰訊郵箱的收件人的文本框看到這樣的使用,而且雙擊選中文字還能彈出層,用來顯示一些信息

你研究它的代码没?

这个确实可以看看它的代码是怎么实现的文本框添加下划线不难,css添加样式即可:


<html>
<body>
<input type="text" id="t1" style="text-decoration: underline;"/>
</body>
</html>



但是要添加分号分隔的话,比较麻烦,outlook邮件里做法是在按回车后,在通信簿中检查用户名,要在web中实现的话,一样需要按下回车后触发事件,写一些js,通过ajax访问后台,匹配用户名,并操作文本框中的数据,实现这个需求。其实 这个我做过(好小的DEMO,没事干折腾的)。其实这个东西不是textbox
而是无数个DIV

http://blog.csdn.net/cj205/article/details/6277208

如果想加样式一点问题都没有简单的实现方法
更多功能自己可以添加

<script>

function delSelect(v)
{
evt = v比较困难貌似挺复杂的,帮顶下LZ
------解决办法-------------------- 关注。用span  给样式有点麻烦的,帮顶了!<input type="text" value="请输入值1" style="border-bottom :1 solid black; border-left :none; border-right :none; border-top :none;" />用一个隐藏的输入框,然后输入内容后在DIV里显示用样式文件定义,html基本功能呵呵 呵呵如果你上面的是用户名的话  你可以用很多种形式删除, 比如 把指定的  名称;  替换为空字符一样可以实现。拿分走人 哈哈样式就能解决吧
好像挺复杂, 应该是用div来模拟不是文本框,可以考虑用个div来模拟。里面有无数个小的span或者是div。CSS  underline试试是把 一个超链 存储到 一个数组,进行读取,或者 删除时候 捕获 键盘 按下的是否为退格键  可以删除数组的 一个值,或 为退格键 的时候 可 判断最后一个“;”前的 字符 进行删除,  大概是这样个, 只是提供一个思路,具体还是靠自己应该就是这样吧!像我们在其他文件里边删除东西也是这样的啊!12楼已经给你提供了例子学以致用你这下划线用CSS不是能实现么。 价格 underline就行了。
详见这里   http://www.docin.com/p-56329239.html

至于你说的删除的时候 按照名称删除  不是一个个字符删除,不知道你具体是什么意思。
不知道你具体的删除形式如何,什么样的情况给予删除。 这个还是简单的,问题是要弄明白
什么情况删除什么。看了,看了,有收获.飘过~~~~不懂有些小麻烦呃呃呃  不太清楚  帮顶起window.event;
if(evt.keyCode.toString()!="8" && evt.keyCode.toString()!="46")
{
if(window.event)
{
window.event.returnValue=false;
window.event.cancelBubble=true;
return false;
}
else
{
evt.preventDefault();
}
return false;
}

ele = window.event?window.event.srcElement:v.target;
while(ele.nodeType!=1) ele = ele.parentNode;

while(ele.tagName!="DIV")
{
ele = ele.parentNode;
}
ele.parentNode.removeChild(ele)

}
</script>
<body>
<div style="border:1px solid gray;height:26px">
<div style="float:left;text-outline:none" unselectable="on" contentEditable=true onkeydown="delSelect(event)"><span style="border-bottom:1px solid red">xxx;</span>&nbsp;</div>
<div style="float:left;text-outline:none" unselectable="on" contentEditable=true onkeydown="delSelect(event)"><span style="border-bottom:1px solid red">yyyy;</span></div> 
<div style="clear:both"></div>
</div>
  相关解决方案