跨越文本输入字段？

Posted 2023-04-18

【中文标题】跨越文本输入字段？

【英文标题】：Span inside text input field?

【发布时间】：2011-09-23 20:35:39

【问题描述】：

是否有可能将跨度作为文本输入字段的值？

我正在为网站制作一个邮件系统，并且想要一个漂亮的接收者输入字段，其中包含添加的接收者并添加到输入文本字段的值中。目前，我使用单独的“添加字段”，同时在跨度容器中显示添加的接收器。我想将这些合并到字段中。就像普通电子邮件软件中的任何输入字段一样。

帮助将不胜感激！提前致谢！

【问题讨论】：

你能用逗号分隔吗？或者为了保持你喜欢的格式，使用textarea?

【参考方案1】：

简短回答：不，您不能在 中包含 。

您有几个选择。您可以使用 javascript 来模拟诸如 email To: 字段之类的行为。例如。监听按键并在 ; 之后处理诸如退格之类的操作。

另一种选择是让列表像文本框一样显示（css 样式）。让最后一个

包含一个已清除样式的文本框。每次用户添加新电子邮件时，然后在文本框前插入一个新的 。

例如

html:

<ul class="email-textbox">
    <li>[e-mail];</li>
    <li>[e-mail];</li>
    <li><input type="text" /></li>
</ul>

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, 可以改成原版)

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

您需要扩展此 javascript 以包含按键处理程序等，但它提供了一般概念。

演示：http://jsfiddle.net/UeTDw/1/

然而，任何选项都需要一些 javascript。

如果你会使用 jQuery，你可以查看jQuery UI autocomplete

【参考方案2】：

一种方法是在 div 顶部放置一个文本输入，该 div 的样式看起来像一个文本输入。

<div id="fake-input">
    <span class="input-item">John Doe</span>
    <span class="input-item">Jane Deere</span>
    <input id="receiver-input" type="text" />
</div>

您可以去除接收者输入的所有样式，并为伪输入添加边框、背景颜色等，使其看起来像一个文本字段。添加接收器后，您可以创建一个新的输入项跨度并将其附加到列表中。

【参考方案3】：

输入文本字段通常用于接受原始文本输入。尝试将输入文本包装在文本字段内会导致用户出错，并且如果该人能够操纵标签，则可能会遇到解析数据的困难。

我个人建议保留您当前的方法，但启用某种形式的 AJAX 支持，以使事情更加动态，对用户来说更不容易出错。

（我的 0.02 美元）

【参考方案4】：

TextExtjs 可能是您想要的。这是一个 jquery 插件，允许在文本区域中使用自动完成等可移动标签。

而here 是一个相关的 SO 讨论 - 我在其中找到了这个插件 - 关于模仿在 facebook 上的某些输入中发现的类似行为。