读书人
栏目▼

文本框里的文字加下划线解决思路

发布时间： 2013-10-23 11:39:13 作者： rapoo

文本框里的文字加下划线
文本框里的文字加下划线，
效果图：
文本框里的文字加下划线解决思路
每一个名称加下划线和分号，删除的时候是按每个名称删除，而不是一个字符一个字符地删。
如何实现，谢谢！！
[解决办法]
应该就是这样吧！像我们在其他文件里边删除东西也是这样的啊！
[解决办法]
你这下划线用CSS不是能实现么。 价格 underline就行了。
详见这里 http://www.docin.com/p-56329239.html

至于你说的删除的时候 按照名称删除 不是一个个字符删除，不知道你具体是什么意思。
不知道你具体的删除形式如何，什么样的情况给予删除。 这个还是简单的，问题是要弄明白
什么情况删除什么。
[解决办法]
如果你上面的是用户名的话 你可以用很多种形式删除， 比如 把指定的 名称; 替换为空字符一样可以实现。
[解决办法]
本帖最后由 net_lover 于 2011-10-10 11:32:12 编辑

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

你研究它的代码没？

这个确实可以看看它的代码是怎么实现的
[解决办法]
样式就能解决吧
[解决办法]
CSS underline
[解决办法]
比较困难
[解决办法]
其实 这个我做过（好小的DEMO，没事干折腾的）。其实这个东西不是textbox
而是无数个DIV

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

如果想加样式一点问题都没有
[解决办法]
有点麻烦的，帮顶了！
[解决办法]
<a>中间名称</a> 控制a的样式不就有下滑线了嘛。。。

删除当然是删除这个a咯。
[解决办法]
<input type="text" value="请输入值1" style="border-bottom :1 solid black; border-left :none; border-right :none; border-top :none;" />
[解决办法]
呃呃呃 不太清楚 帮顶起
[解决办法]
用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>

[解决办法]
呵呵 呵呵
[解决办法]
关注。
[解决办法]
你要是想要某某网站的效果，建议你仔细研究下他们的源代码。 你说的网站别人未必使用

firebug,yslow都是很好的查看代码的工具
[解决办法]
12楼已经给你提供了例子
[解决办法]
顶起！
[解决办法]
用一个隐藏的输入框，然后输入内容后在DIV里显示
[解决办法]
拿分走人 哈哈
[解决办法]
飘过~~~~
[解决办法]
试试是把 一个超链 存储到 一个数组，进行读取，或者 删除时候 捕获 键盘 按下的是否为退格键 可以删除数组的 一个值，或 为退格键 的时候 可 判断最后一个“；”前的 字符 进行删除， 大概是这样个， 只是提供一个思路，具体还是靠自己
------解决方案--------------------


文本框里的文字加下划线解决思路
好像挺复杂, 应该是用div来模拟
[解决办法]
不懂
[解决办法]
看了,看了,有收获.
[解决办法]
貌似挺复杂的，帮顶下LZ
[解决办法]
好好好哈
[解决办法]
用css实现
[解决办法]
拿分 吼吼
[解决办法]
直接看源码
[解决办法]
不知所云，顶一下
[解决办法]
顶一下顶一下
[解决办法]
说实话 有些蛋疼
[解决办法]


手拿镰刀钩电线，一路火花带闪电。
[解决办法]
我也想知道怎么实现的。。。。
[解决办法]
顶。。。
[解决办法]
我觉得比较困难，看下再说。
[解决办法]
引用:
其实 这个我做过（好小的DEMO，没事干折腾的）。其实这个东西不是textbox
而是无数个DIV

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

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


是无数个DIV 就是这样的！！！
[解决办法]
学习 学习
[解决办法]
css可以
[解决办法]
谢谢分享,学习了！！！
[解决办法]
该回复于2012-08-28 09:11:48被版主删除
[解决办法]
大家的回答都很不错
[解决办法]
引用:
其实 这个我做过（好小的DEMO，没事干折腾的）。其实这个东西不是textbox
而是无数个DIV

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

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

你的代码测试了吗，好像不行噢。
[解决办法]
路过学习
[解决办法]
应该是放多个div
[解决办法]
引用:
引用:

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

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

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

你的代码测试了吗，好像不行噢。
万恶的CSDN博客系统。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>智能填写</title>  
                            <style type="text/css" >          #multiinput {  
                font-size:22px;  
                border:1px #000 solid;  
                font-weight:700;  
            }  
            #newInput {  
                height:24px;  
                font-size:22px;  
                border:none;  
            }  
            #selection ul {  
                margin:0;  
                padding:0;  
                border:1px solid #000;  
                width:75px;  
                border-top:0;  
            }   
 
            #selection li {  
                list-style:none;  
                margin:0;  
                padding:0;  
                height:24px;  
                cursor:pointer;  
                width:75px;  
            }  
            #multiinput a:hover  {  
                background-color:#eee;  
                cursor:text;  
            }  
            li.selected {  
                background-color:#eee;  
            }  
        </style>  
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
        <script type="text/javascript"><!--  
            var str = ['张学友','张信哲','刘德华','孙燕姿','周杰伦','张含韵','许飞','许巍','张宇','周星驰','唐朝乐队','迪克牛仔','郑伊健','陈小春','汪峰'];  
            $(function(){  
                //输入框获得焦点时  
                $("#newInput").focus(function(){  
                    var textStr = ["<ul>"];  
                    for(var i = 0; i < str.length; i++){  
                        textStr.push('<li>' + str[i] + '</li>');  
                    }  
                    textStr.push("</ul>");  
                    textStr = textStr.join('');  
                    $("#selection").show().empty().append(textStr);  
                })  
                //输入框失去焦点时  
                .blur(function(e){  
                    $("#selection").hide();  
                })  
                //按键按下时  
                .keydown(function(e){  
                    if(e.keyCode == 8 && $(this).val().length == 0) {  
                        $(this).prev().remove();  
                    } else if(e.keyCode == 40) {  
                        move(true);  
                    }   else if(e.keyCode == 38) {  
                        move(false);   
 
                    } else if(e.keyCode == 13) {  
                        $('<a>' + $('.selected').text() + ';</a>').insertBefore('#newInput');  
                        $('#newInput').val('').focus();  
                    }  
                })  
                //按键弹出时，进行搜索匹配。  
                .keyup(function(e){  
                    if(e.keyCode == 40 
[解决办法]
 e.keyCode == 8 
[解决办法]
 e.keyCode == 38)  
                        return;  
                    var textStr = $(this).val();  
                    var reg = new RegExp('(?=[^@]+)[^@]*' + textStr + '[^@]*(?=@
[解决办法]
$)','g');  
                    var arr = str.join("@").match(reg) 
[解决办法]
 [];  
                    textStr = ['<ul>'];  
                    for(var i = 0; i < arr.length; i++) {  
                        textStr.push('<li>' + arr[i] + '</li>');  
                    }  
                    textStr.push('</ul>');  
                    textStr = textStr.join('');  
                    $("#selection").empty().show().append(textStr);  
                });  
                //li的背景效果  
                $("#selection li").live("mouseover",function(){  
                    $(this).siblings().removeClass('selected').end().addClass('selected');  
                })  
                //li的选中事件  
                .live("mousedown",function(){  
                    $('<a>' + $(this).text() + ';</a>').insertBefore("#newInput");  
                    $("#newInput").val('').focus();   
                });  
                  
                $("#multiinput a").live('dblclick',function(){  
                    $(this).remove();  
                });  
            });  
            function move(down) {  
                var selected = $('.selected');   
 
                if(down) {  
                    if(selected.length == 0) {  
                        $('#selection li:first').addClass('selected');  
                    } else {  
                        selected.removeClass('selected').next().addClass('selected');  
                    }  
                } else {  
                    if(selected.length == 0) {  
                        $('#selection li:last').addClass('selected');  
                    } else  {  
                        selected.removeClass('selected').prev().addClass('selected');  
                    }  
                }  
            }  
          
// --></script>  
    </head>  
    <body>  
        <div id="multiinput">  
            <a id="t"></a><input id="newInput" type="text" autocomplete="off"/>  
        </div>  
        <div>  
            <div id="selection">  
            </div>  
        </div>  
    </body>  
</html>



[解决办法]
引用:
引用:

引用:

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

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

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

你的代码测试了吗，好像不行噢。
万恶的CSDN博客……


呵呵原来是博客系统的原因，我刚才试了下，是可以的，不过不能自己输入，还有双击会删除，我好好研究下，刚才也去腾讯邮箱看了下，奈何水平有限不知道怎么下手，还是你这个容易懂点。
[解决办法]
顶起吧
[解决办法]
一个简单实现，但是下划线连接在一起了。
<html>
<head><title>..</title></head>
<body>
<input type='text' name='t1' value="abc;dfd;sdfsf" onkeyup="deleteFun(this)"
style="border:1px solid #a9a9a9;text-decoration: underline;">
<script>
function deleteFun(text){

if(8==event.keyCode){
var last = text.value.lastIndexOf(";");
text.value = text.value.substring(0,last);
}
}
</script>
</body>
</html>
[解决办法]
每一个名称加下划线和分号，删除的时候是按每个名称删除，而不是一个字符一个字符地删。
如何实现，谢谢！！
[解决办法]
这个不是很难。。。
[解决办法]
在发一个。呵呵
<html>
<head><title>..</title></head>
<body onload="">
<style>
*{font-size:12px;}
</style>
<span style="width:700px;height:20px;top:2px;left:1px;border:1px dashed #a9a9a9">
<span><a href="">你好</a>;<a href="">中</a>;<a href="">sdfsf</a></span>
<input type='text' name='t1' onkeyup="deleteFun(this)" style="border:none;width:15px;height:20px;padding-top:5px;" />
</span>

<script>
function deleteFun(text){
var sp = text.parentNode.firstChild;
if(8==event.keyCode){
var last = sp.innerHTML.lastIndexOf(";");
sp.innerHTML = sp.innerHTML.substring(0,last);
}else{

var v = text.value;
text.value="";
sp.innerHTML+="<a href=''>"+v+"</a>";

//这块估计要根据实际情况来写了 具体什么时候加分号，视情况而定

}
}
</script>


</body>
</html>
[解决办法]
在winform下如何实现？

看网易闪电邮上面的收信人地址栏也有类似的效果

[解决办法]
路过学习~
[解决办法]
路过!
[解决办法]

引用:
引用:

引用:

引用:

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

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

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

你的代码……
我简化了许多。因为当时有特定需求。
双击肯定可以删除啊，然后按后退键也可以删除前一个结果。
[解决办法]
学习学习
[解决办法]
呵呵 我就是这样做的 用js实现的 代码量也比较大 看起来费劲呢 郁闷的是 换了单位 那些东西找不到了~~
引用:
引用:

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

你研究它的代码没？

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

[解决办法]
不懂，帮顶
[解决办法]
这个好做。用div做。可编辑div。
[解决办法]
我也很想知道！敬请高手！！
[解决办法]
web开发真是太多细节的东西了....
[解决办法]
学习学习
[解决办法]
网上开源的jquery框架就有得，我这会忘记网址了，你去搜一下ajaxcode
[解决办法]
引用:
引用:

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

思路可以的



同意这个意思.
[解决办法]
luguo fdfssssssssssssss
[解决办法]
觉得用js来实现不会太难
[解决办法]

jQuery版,,,看看是不是你要的效果。。。。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="lib/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("div").blur(function() {
                var content = $(this).text();
                if (content.indexOf(";") > 0) {
                    var title = content.split(";");
                    var temp = "";
                    for (var i = 0; i < title.length; i++) {
                        if (title[i] != "") {
                            temp += "<span>" + title[i] + ";</span>";
                        }
                    }
                    $(this).html(temp);
                }
                else {
                    if (content != "") {
                        $(this).html("<span>" + content + ";</span>");
                    }
                }
            });

            $(document).keyup(function(e) {
                var currKey = 0, e = e 
[解决办法]
 event;
                currKey = e.keyCode  
 
[解决办法]
 e.which 
[解决办法]
 e.charCode;
                if (currKey == 8) {
                    var content = $("div").text();
                    var title = content.split(";");
                    var temp = "";
                    for (var i = 0; i < title.length - 1; i++) {
                        temp += "<span>" + title[i] + ";</span>";
                    }
                    $("div").html(temp);
                }
            });
        });
    </script>

    <style type="text/css">
        div
        {
            border: solid 1px silver;
            height: 26px;
            line-height: 26px;
            max-width: 400px;
            width: auto;
            font-size: 14px;
            font-family: 微软雅黑;
        }
        div span
        {
            text-decoration: underline;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div contenteditable="true">
    </div>
</body>
</html>


[解决办法]
请参考：http://aehlke.github.com/tag-it/
[解决办法]
每天顶帖得10分
[解决办法]
学习。。。，帮顶
[解决办法]
GOOD都是高手
[解决办法]
路过，学习了。
[解决办法]
其实在加账户名称的时候，加一个分号，然后赋给变量，存入数组里面，删除的时候，让它遍历某个变量就可以删除了，只是思路

读书人网 >CSS

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net