javascript - 两者如何结合和通过审美方式？

Question

我使用用户脚本（Greasemonkey/TamperMonkey），<input>如果选择了一个元素，我需要在我的下拉列表中添加一个。

这是一种使我的<select>动态和交互的方式，以便用户可以自己添加项目。

我想从视觉上看，用户的印象<input>是<option>.<select>

我发现这样做的唯一方法是减小宽度<select>并显示<input>.

HTML：

<input style='display:none'></input>
<select id='my_select' style='width:150px'>
    <option>Test 1</option>
    <option>Test 2</option>
    <option>Test 3</option>
    <option>Make me feel input</option>
</select>

脚本：

$('#my_select').change(function() {
    var choosen = $("select option:selected").text();

    if (choosen == 'Make me feel input') {
        $('input').attr('style','width:125px;border-right:0px');
        $('select').attr('style','width:24px;margin-left:-4px;border-left:0px')
    }
    else {
        $('input').attr('style','display:none');
        $('select').attr('style','width:150px');
    }
});

结果很不错，你可以在 jsFiddle 上试试。

不幸的是，由于border-left:0px和border-right:0px外观完全丢失，输入和选择的样式变得难看。

(火狐)

此外，最终外观取决于所使用的浏览器。例如，对于 Chrome，会发生以下情况：

所以我希望我配置我的 input-select 以使它看起来不错，无论浏览器如何。是否可以使用 CSS 和 JavaScript 模拟 Firefox 给出的外观？

当然，我考虑过使用 Chosen、SelectBoxIt 或 Select2 之类的插件，但我认为它们与我的 input-select 不兼容（例如，因为宽度调整大小）。

请问你能帮帮我吗？

Answer 1

没有包装器有一种更简单的方法。您可以将输入设置为position:relative，display:inline-block然后操作margin以定位到select. 请注意，在选择之后添加输入要容易得多，这将使 z-index 黑客变得不必要。

请参阅此处的示例：http: //jsfiddle.net/AnbmU/6/我还冒昧地清理了您的代码中的常见错误。

编辑：实际上，您甚至不需要position:relative. 不知道为什么我提出这个。

Answer 2

我看到了一些浏览器中提供的小提琴 yuo。
存在一些问题和悖论：

1-当您单击选择框时，它会（自然地）打开，当您单击输入时，它会激活并准备好输入。问题是您要如何处理？

2-在您的代码中，当您减小选择宽度时，它将在等于您输入宽度的移位位置打开；

最后回答
你应该把你的输入和选择放在一个容器（包装器）中，然后制作它position: relative；
然后是 yuor 输入：border: 0; position: absolute; top: 0; left: 0; z-index: 2;和display: none，当你想激活它时，只需让它：display: block; 它可以很好地处理上述两个问题

Answer 3

一个经常被称为“组合框”的 ui 组件具有与您所描述的类似的功能。

例子：

jquery
http://simpletutorials.com/?path=tutorials/javascript/jquery/ddcombobox
http://fairwaytech.com/flexbox/flexbox-demos/#demo1

道场
https://dojotoolkit.org/reference-guide/1.9/dijit/form/ComboBox.html#dijit-form-combobox

跨浏览器的表单元素样式一直是一个挑战。通常，ui 工具包只是避免了这个问题，并使用大量 div 和显式样式完全重新创建 ui 组件以提高可靠性。

Answer 4

你应该试试这个：https ://github.com/eredacokmerke/metal

还有一个例子：codepen.io/eredacokmerke/pen/LEpNLg

来自金属自述文件：

Metal is a pure javascript library that provides combination of select and input tag.

Usage

add css :
<link rel="stylesheet" href="https://raw.githack.com/eredacokmerke/metal/master/metal.css">

add js :
<script src="https://raw.githack.com/eredacokmerke/metal/master/metal.js"></script>

add html for list with input:
<div class="metal-div">
    <div class="metal-input-div" metal-text="Choose..."></div>
    <div class="metal-items-div">
        <ul class="metal-items">
            <li>first_item</li>
            <li>second_item</li>
            ....
        </ul>
    </div>
</div>

add html for list without input:
<div class="metal-div">
    <div class="metal-output-div" metal-text="Choose..."></div>
    <div class="metal-items-div">
        <ul class="metal-items">
            <li>first_item</li>
            <li>second_item</li>
            ....
        </ul>
    </div>
</div>