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

2013-10-23

文本框里的文字加下划线文本框里的文字加下划线，效果图：每一个名称加下划线和分号，删除的时候是按每个名称

文本框里的文字加下划线
文本框里的文字加下划线，
效果图：
文本框里的文字加下划线解决思路
每一个名称加下划线和分号，删除的时候是按每个名称删除，而不是一个字符一个字符地删。
如何实现，谢谢！！
[解决办法]
应该就是这样吧！像我们在其他文件里边删除东西也是这样的啊！
[解决办法]
你这下划线用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>&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>

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

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都是高手
[解决办法]
路过，学习了。
[解决办法]
其实在加账户名称的时候，加一个分号，然后赋给变量，存入数组里面，删除的时候，让它遍历某个变量就可以删除了，只是思路

热点排行