email – 文本输入字段内的跨度？

发布时间：2020-12-14 23:16:06 所属栏目：资源来源：网络整理

导读：是否可以将span作为文本输入字段的值放置？我正在为一个网站制作一个邮件系统,并且想要一个漂亮的接收器输入字段,其中包含添加的接收器并添加到输入文本字段的值.目前我使用单独的“添加字段”,同时在span-container中显示添加的接收器.我想将这些字段合并

是否可以将span作为文本输入字段的值放置？

我正在为一个网站制作一个邮件系统,并且想要一个漂亮的接收器输入字段,其中包含添加的接收器并添加到输入文本字段的值.目前我使用单独的“添加字段”,同时在span-container中显示添加的接收器.我想将这些字段合并到一起.就像常规电子邮件软件中的任何输入字段一样.

帮助将非常感谢！提前致谢！

最佳答案

简答：不,你不能包括< span />在< input />内

你有几个选择.您可以使用javascript来模拟电子邮件收件人：字段等行为.例如.听取按键操作并在a之后处理退格键等操作.

另一种选择是使列表像文本框一样出现(css样式).有最后一个< li />包含已清除样式的文本框.每次用户添加新电子邮件,然后插入新的< li />在文本框之前.

例如.

HTML：


CSS：

.email-textbox {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 2px 4px; 
}

.email-textbox li {
    display: inline-block;
    list-style: none;
    margin-left: 5px;   
}

.email-textbox input {
    background: none;
    border: none;
}

javascript(jQuery,可以改为vanilla)

$(function () {
    $('.email-textbox').find('input').focus();
});

你需要扩展这个javascript以包含一个按键处理程序等,但它提供了一般的想法.
演示：http://jsfiddle.net/UeTDw/1/
任何选项都需要一些javascript.
如果你可以使用jQuery,你可以查看jQuery UI autocomplete


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!