Question

我有一个带有数据列表的HTML表单，其值使用PHP设置，如

<input list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

我希望用户看到datalist中的选项，以及PHP的当前值。但是，“自动填充”操作会导致列表中与当前值不匹配（或开始）的值从列表中隐藏，例如$val='apple'。有没有办法避免这种情况，或者浏览器是否修复了这种行为？

Answer 1

<datalist>使用自动填充功能，因此这是正常行为。

例如，如果您将输入值设置为“o”，您将在datalist选项中看到 orange 。它从第一个字母检查单词。但是如果你将输入值设置为'a'，那么你根本看不到选项。

因此，如果您已经输入了值，那么除了该值（如果存在）之外，datalist选项中不会显示任何内容。它的行为不像select。

解决方法是使用像这样的jquery：

$('input').on('click', function() {
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val('apple');
  }
});

在此完整测试：https://jsfiddle.net/yw5wh4da/

或者您可以使用<select>。在这种情况下，对我来说这是更好的解决方案。

Answer 2

HTML：

<input list="values" placeholder="select">
<datalist id="values">
  <option value="orange">
  <option value="banana">
  <option value="lemon">
  <option value="apple">
</datalist>

JS：

$('input').on('click', function() {
    $(this).attr('placeholder',$(this).val());
  $(this).val('');
});
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val($(this).attr('placeholder'));
  }
});

Answer 3

上面的解决方案很棒，但是如果用户自然只是点击占位符值旁边的输入框，打算保留并继续它，它将被完全删除。

基于上述解决方案，我为我做了以下解决方案：

HTML：

render() {

          let sortedDate = this.state.item.sort((a, b) => Date.parse(new Date(a.expected_ship_date("/").reverse().join("-"))) - Date.parse(new Date(b.expected_ship_date("/").reverse().join("-"))));
          let sortedDate1 = this.state.item.sort((a, b) => new Date(a.expected_ship_date) - new Date(b.expected_ship_date));

        return (
            <tr>
                <td><input name="line_number" type="text" value={ this.state.item.line_number } disabled={ this.props.mode }  className="form-control" onChange={ this.handleInputChange }/> </td>
                <td><input name="requested_ship_date" type="date" value={ this.state.item.expected_ship_date } disabled={ this.props.mode }  className="form-control" onChange={ this.handleInputChange }  /></td>

                <td>{sortedDate.map( (c, i) => <div>{c.expected_ship_date}</div>)}</td>
            </tr>

        );
}

JS：

<input id="other" list="values" value="<?php echo $val; ?>">
 <datalist id="values">
  <option value="orange">
  <option value="banana">
 </datalist>

对我而言，页面上有很多输入框，我只希望这个具有这种行为，所以我使用id并将其设置为个人。＆＃34;如果您希望将其更改为更通用的函数，则必须将jQuery(document).ready(function ($) { function putValueBackFromPlaceholder() { var $this = $('#other'); if ($this.val() === '') { $this.val($this.attr('placeholder')); $this.attr('placeholder',''); } } $('#other') .on('click', function(e) { var $this = $(this); var inpLeft = $this.offset().left; var inpWidth = $this.width(); var clickedLeft = e.clientX; var clickedInInpLeft = clickedLeft - inpLeft; var arrowBtnWidth = 12; if ((inpWidth - clickedInInpLeft) < arrowBtnWidth ) { $this.attr('placeholder',$this.val()); $this.val(''); } else { putValueBackFromPlaceholder(); } }) .on('mouseleave', putValueBackFromPlaceholder); });与发生单击的元素以及事件本身绑定。

Answer 4

只需在输入标记中粘贴所需的默认值即可。无需额外的JavaScript编码！

        <input list="skills" value="DBA">

          <datalist name="skills" id="skills">

              <option value="PHP">Zend PHP</option>
              <option value="DBA">ORACLE DBA</option>
              <option value="APEX">APEX 5.1</option>
              <option value="ANGULAR">ANGULAR JS</option>

          </datalist>

Answer 5

基于提议的解决方案的另一种选择，可以保留先前的值或所选的新值。

// Global variable to store current value
var oldValue = '';
// Blank value when click to activate all options
$('input').on('click', function() {
  oldValue = $(this).val();
  $(this).val('');
});
// Restore current value after click
$('input').on('mouseleave', function() {
  if ($(this).val() == '') {
    $(this).val(oldValue);
  }
});

https://jsfiddle.net/jpussacq/7Ldbc013/

Answer 6

最干净的选项可能是 Mozilla.org 推荐的选项。

input.onfocus = function () {
  datalist.style.display = 'block';
}

input.onblur = function () {
  datalist.style.display = 'none';
}



for (let option of datalist.options) {
  option.onclick = function () {
    input.value = this.value;
    datalist.style.display = 'none';
  }
}

datalist.style.width = input.offsetWidth + 'px';
datalist.style.left = input.offsetLeft + 'px';
datalist.style.top = input.offsetTop + input.offsetHeight + 'px';

datalist {
  position: absolute;
  background-color: lightgrey;
  font-family: sans-serif;
  font-size: 0.8rem;
}

option {
  background-color: #bbb;
  padding: 4px;
  margin-bottom: 1px;
  cursor: pointer;
}

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

如果设置了默认值，如何让浏览器显示所有datalist选项？

6 个答案: