Question

我想将输入文本框拆分为两个，但接受输入就像来自单个输入文本框一样。例如，我需要接受一个人的姓名，但我希望将输入文本框拆分为两个单独的文本框，分别标记为“名字”和“姓氏”。请只使用CSS。谢谢！

Answer 1

我用jQuery做了一些事情：

HTML：

<div class="input-group" id="unified-inputs">
<input type="text" class="form-control" name="first-name" placeholder="First Name" />
<input type="text" class="form-control" name="last-name" placeholder="Last Name" />
</div>
<input type="text" class="form-control" name="name" style="display: none;" />
<input type="submit" class="btn btn-default" onclick="$().unifyInputs('first-name', 'last-name', 'name');" />

CSS：

body { margin: 10px; }
#unified-inputs.input-group { width: 100%; }
#unified-inputs.input-group input { width: 50% !important; }
#unified-inputs.input-group input:last-of-type { border-left: 0; }

jQuery的：

$.fn.unifyInputs = function(firstName, secondName, finalName) {
    $("input[name='"+firstName+"']").hide();
    $("input[name='"+secondName+"']").hide();

    $("input[name='"+finalName+"']").show();
    $("input[name='"+finalName+"']").val($("input[name='"+firstName+"']").val()+" "+$("input[name='"+secondName+"']").val());
}

看看它是如何运作的：http://jsfiddle.net/f5gogmac/5/

Answer 2

只有css你无法处理值，但如果你想将值保存到同一个地方，最好接受一个字段。

无论如何，为了更好地处理信息，最好处理两个字段并将它们分开保存。

希望这有帮助。

将输入文本框拆分为2但接受输入为一

2 个答案: