文本框里的文字加下划线_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

文本框里的文字加下划线_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:24 PM

文本框里的文字加下划线，
效果图：

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

回复讨论(解决方案)

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

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

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

本帖最后由 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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7786

Java教學

1644

CakePHP 教程

1400

Laravel 教程

1297

PHP教程

1234

Related knowledge

HTML容易為初學者學習嗎？ Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML，CSS和JavaScript的角色：核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

了解HTML，CSS和JavaScript：初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。