搜索
首页web前端html教程文本框里的文字加下划线_html/css_WEB-ITnose

文本框里的文字加下划线,
效果图:

每一个名称加下划线和分号,删除的时候是按每个名称删除,而不是一个字符一个字符地删。
如何实现,谢谢!!


回复讨论(解决方案)

我在???箱的收件人的文本框看到??的使用,而且???中文字?能?出?,用??示一些信息

应该就是这样吧!像我们在其他文件里边删除东西也是这样的啊!

你这下划线用CSS不是能实现么。 价格 underline就行了。
详见这里   http://www.docin.com/p-56329239.html

至于你说的删除的时候 按照名称删除  不是一个个字符删除,不知道你具体是什么意思。
不知道你具体的删除形式如何,什么样的情况给予删除。 这个还是简单的,问题是要弄明白
什么情况删除什么。

如果你上面的是用户名的话  你可以用很多种形式删除, 比如 把指定的  名称;  替换为空字符一样可以实现。

本帖最后由 net_lover 于 2011-10-10 11:32:12 编辑

我在???箱的收件人的文本框看到??的使用,而且???中文字?能?出?,用??示一些信息
你研究它的代码没?

这个确实可以看看它的代码是怎么实现的

样式就能解决吧

CSS  underline

比较困难

你这下划线用CSS不是能实现么。 价格 underline就行了。
详见这里   http://www.docin.com/p-56329239.html

至于你说的删除的时候 按照名称删除  不是一个个字符删除,不知道你具体是什么意思。
不知道你具体的删除形式如何,什么样的情况给予删除。 这个还是简单的,问题是要弄明白
什么情况删除什么。
underline 样式是把文本框里的的文字都加了下划线,我是把每个名称加下划线,
至于说删除,就是按照每个用户名删除,比如:张三,删除的时候是一次删除掉的,而不是两次删除的,不知道我说的明白吗

类似QQ发送邮件的收件人的文本框

其实 这个我做过(好小的DEMO,没事干折腾的)。其实这个东西不是textbox
而是无数个DIV

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

如果想加样式一点问题都没有

中间名称 控制a的样式不就有下滑线了嘛。。。

删除当然是删除这个a咯。

用css实现。。。

文本框添加下划线不难,css添加样式即可:

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


但是要添加分号分隔的话,比较麻烦,outlook邮件里做法是在按回车后,在通信簿中检查用户名,要在web中实现的话,一样需要按下回车后触发事件,写一些js,通过ajax访问后台,匹配用户名,并操作文本框中的数据,实现这个需求。

学以致用

有些小麻烦

不是文本框,可以考虑用个div来模拟。里面有无数个小的span或者是div。

用样式文件定义,html基本功能

用span  给样式

嗯  可以

简单的实现方法
更多功能自己可以添加

<script>function delSelect(v){evt = v||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> </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>

谢谢大家的回复,
其实我就是想实现类似QQ或者163发送邮件时的收件人的文本框

呵呵 呵呵

关注。

有高人做过么?
谢谢!!!!!!!!!!!

你要是想要某某网站的效果,建议你仔细研究下他们的源代码。 你说的网站别人未必使用

firebug,yslow都是很好的查看代码的工具

12楼已经给你提供了例子

用一个隐藏的输入框,然后输入内容后在DIV里显示

拿分走人 哈哈

飘过~~~~

试试是把 一个超链 存储到 一个数组,进行读取,或者 删除时候 捕获 键盘 按下的是否为退格键  可以删除数组的 一个值,或 为退格键 的时候 可 判断最后一个“;”前的 字符 进行删除,  大概是这样个, 只是提供一个思路,具体还是靠自己


好像挺复杂, 应该是用div来模拟

看了,看了,有收获.

谢谢大家的回复!!!!!!!有了思路,希望能够解决。

好好好哈

用css实现

拿分 吼吼

直接看源码

说实话 有些蛋疼

试试是把 一个超链 存储到 一个数组,进行读取,或者 删除时候 捕获 键盘 按下的是否为退格键  可以删除数组的 一个值,或 为退格键 的时候 可 判断最后一个“;”前的 字符 进行删除,  大概是这样个, 只是提供一个思路,具体还是靠自己
思路可以的

噢,原来如此啊!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

视口元标签是什么?为什么对响应式设计很重要?视口元标签是什么?为什么对响应式设计很重要?Mar 20, 2025 pm 05:56 PM

本文讨论了视口元标签,这对于移动设备上的响应式Web设计至关重要。它解释了如何正确使用确保最佳的内容缩放和用户交互,而滥用可能会导致设计和可访问性问题。

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?Mar 20, 2025 pm 06:05 PM

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具