我希望在表单中有一个选择元素,除了下拉菜单中的选项外,能够编辑并添加新的选项,但不是使用另一个文本输入框,我需要一次性完成。这是否可能?
我希望在表单中有一个选择元素,除了下拉菜单中的选项外,能够编辑并添加新的选项,但不是使用另一个文本输入框,我需要一次性完成。这是否可能?
没有什么是不可能的。以下是一个解决方案,只需在 <select>
的值更改时设置文本输入框的值(已在 Firefox 和 Google Chrome 上进行了测试):
没什么不可能的。以下是一个解决方案,只需在 <select>
的值更改时设置文本输入框的值(已在 Firefox 和 Google Chrome 上进行了测试):
.select-editable {position:relative; background-color:white; border:solid grey 1px; width:120px; height:18px;}
.select-editable select {position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0;}
.select-editable input {position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none;}
.select-editable select:focus, .select-editable input:focus {outline:none;}
<div class="select-editable">
<select onchange="this.nextElementSibling.value=this.value">
<option value=""></option>
<option value="115x175 mm">115x175 mm</option>
<option value="120x160 mm">120x160 mm</option>
<option value="120x287 mm">120x287 mm</option>
</select>
<input type="text" name="format" value=""/>
</div>
<select>
的空选项槽中(感谢@TomerPeled)。它还具有更灵活/可变的CSS:<select>
的空选项槽中(感谢@TomerPeled)。它还具有更灵活/可变的CSS:
.select-editable {position:relative; width:120px;}
.select-editable > * {position:absolute; top:0; left:0; box-sizing:border-box; outline:none;}
.select-editable select {width:100%;}
.select-editable input {width:calc(100% - 20px); margin:1px; border:none; text-overflow:ellipsis;}
<div class="select-editable">
<select onchange="this.nextElementSibling.value=this.value">
<option value=""></option>
<option value="115x175 mm">115x175 mm</option>
<option value="120x160 mm">120x160 mm</option>
<option value="120x287 mm">120x287 mm</option>
</select>
<input type="text" oninput="this.previousElementSibling.options[0].value=this.value; this.previousElementSibling.options[0].innerHTML=this.value" onchange="this.previousElementSibling.selectedIndex=0" value="" />
</div>
在HTML5中,您还可以使用 <input>
的list
属性 和 <datalist>
元素 来实现此功能:
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
(click once to focus and edit, click again to see option dropdown)
但这更像是自动完成列表;一旦开始输入,只有包含键入字符串的选项才会留作建议。根据您想要使用它做什么,这可能或可能不实用。
与上面的答案类似,但不使用绝对定位:
<select style="width: 200px; float: left;" onchange="this.nextElementSibling.value=this.value">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input style="width: 185px; margin-left: -199px; margin-top: 1px; border: none; float: left;"/>
因此,创建一个输入框并将其放在组合框的上方
A bit more universal <select name="env" style="width: 200px; position:absolute;" onchange="this.nextElementSibling.value=this.value">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input style="width: 178px; margin-top: 1px; border: none; position:relative; left:1px; margin-right: 25px;" value="123456789012345678901234"/>layout ...
select
标签是操作系统创建的一个独立窗口,是否始终置顶? - Dee <div data-bind="editableSelect: {options: optionsObservable, value: nameObservable}"></div>
composition.addBindingHandler('editableSelect',
{
init: function(hostElement, valueAccessor) {
var optionsObservable = getOptionsObservable();
var valueObservable = getValueObservable();
var $editableSelect = $(hostElement);
$editableSelect.addClass('select-editable');
var editableSelect = $editableSelect[0];
var viewModel = new editableSelectViewModel(optionsObservable, valueObservable);
ko.applyBindingsToNode(editableSelect, { compose: viewModel });
//tell knockout to not apply bindings twice
return { controlsDescendantBindings: true };
function getOptionsObservable() {
var accessor = valueAccessor();
return getAttribute(accessor, 'options');
}
function getValueObservable() {
var accessor = valueAccessor();
return getAttribute(accessor, 'value');
}
}
});
查看
<select
data-bind="options: options, event:{ focus: resetComboBoxValue, change: setTextFieldValue} "
id="comboBox"
></select>
<input
data-bind="value: value, , event:{ focus: textFieldGotFocus, focusout: textFieldLostFocus}"
id="textField"
type="text"/>
define([
'lodash',
'services/errorHandler'
], function(
_,
errorhandler
) {
var viewModel = function(optionsObservable, valueObservable) {
var self = this;
self.options = optionsObservable();
self.value = valueObservable;
self.resetComboBoxValue = resetComboBoxValue;
self.setTextFieldValue = setTextFieldValue;
self.textFieldGotFocus = textFieldGotFocus;
self.textFieldLostFocus = textFieldLostFocus;
function resetComboBoxValue() {
$('#comboBox').val(null);
}
function setTextFieldValue() {
var selection = $('#comboBox').val();
self.value(selection);
}
function textFieldGotFocus() {
$('#comboBox').addClass('select-editable-input-focus');
}
function textFieldLostFocus() {
$('#comboBox').removeClass('select-editable-input-focus');
}
};
errorhandler.includeIn(viewModel);
return viewModel;
});
.select-editable {
display: block;
width: 100%;
height: 31px;
padding: 6px 12px;
font-size: 12px;
line-height: 1.42857143;
color: #555555;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
border-radius: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;padding: 0;
}
.select-editable select {
outline:0;
padding-left: 10px;
border:none;
width:100%;
height: 29px;
}
.select-editable input {
outline:0;
position: relative;
top: -27px;
margin-left: 10px;
width:90%;
height: 25px;
border:none;
}
.select-editable select:focus {
outline:0;
border: 1px solid #66afe9;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.select-editable input:focus {
outline:0;
}
.select-editable-input-focus {
outline:0;
border: 1px solid #66afe9 !important;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" id="myselect"/>
<datalist id="myselect">
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</datalist>
<datalist>
元素的一部分。否则,必须清空字段才能在输入数据时看到有效选择。新值将被接受为键入。必须使用JS或其他方法处理新值以使其持久化。这不是完美的,但对于我的极简需求足够了,所以我想分享一下。input
元素自适应于select
元素,并且在我的Android手机的Chrome、Firefox上看起来很好(为select
设置color:transparent
和一些颜色的option
以隐藏select
的文本显示,因为input
和.combobox div:after
不能完全覆盖select
)。
/* https://dev59.com/zmYr5IYBdhLWcg3waJj7#41941056
select option:first-child, */
.combobox select, .combobox select option { color: #000000; }
.combobox select:invalid, .combobox select option[value=""] { color:grey; }
.combobox {position:absolute; left:80px; top:6px;}
.combobox>div { position:relative; font-size:1em; }
.combobox select {
font-size:inherit; color:transparent;
padding:0; -moz-appearance:none; -webkit-appearance:none; appearance:none;
border:1px solid blueviolet;
}
.combobox input {
position:absolute;top:1px;left:0px; text-overflow:ellipsis;
box-sizing:border-box; padding:0px; margin:0px; height:calc(100% - 1px); width:calc(100% - 20px);
border:1px solid blueviolet; border-right:none; border-top:none;
}
.combobox>div:after{
position:absolute; top:0px; right:0px; height:100%; width:20px;
box-sizing:border-box; content:"▼"; border:1px solid blueviolet; pointer-events:none;
display:flex; flex-direction:row; align-items:center; justify-content:center;
}
.combobox select:focus, .combobox input:focus {outline:none;}
<!-- mandatory benefits/social security/welfare -->
<div class="combobox"><div>
<select id=MandatoryBenefits onchange="this.nextElementSibling.value=this.value" required>
<option value="" selected>Select ...</option>
<option value="Pension">Pension %</option>
<option value="Medical">Medical %</option>
<option value="Unemployment">Unemployment %</option>
<option value="Injury">Injury %</option>
<option value="Maternity">Maternity %</option>
<option value="Serious Illness">Serious Illness %</option>
<option value="Housing Fund">Housing Fund %</option>
</select>
<input type="text" value="" onchange="this.previousElementSibling.selectedIndex=0"
oninput="this.previousElementSibling.options[0].value=this.value; this.previousElementSibling.options[0].innerHTML=this.value" />
</div></div>
在线演示 (@jsbin)