当设置默认值时,如何让浏览器显示所有datalist选项？

Question

我有一个带有datalist的HTML表单,其值使用PHP设置,例如

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

我希望用户看到datalist中的选项,以及PHP的当前值.但是,"自动完成"操作会导致列表中与当前值不匹配(或开始)的值从列表中隐藏,例如if $val='apple'.有什么方法可以避免这种情况,还是浏览器修复了这种行为？

Answer 1

我发现使用 click 和 mouseleave 事件并不理想，因为它们无法使用键盘控件。

\n

所以我想出了这个辅助函数：

\n

更新：blur()输入后触发事件

\n

正如@Joe Platano 所评论的，我们可以通过在输入事件后触发blur()（至少对于基于 chromium/blink 的浏览器）来改进数据列表行为 \xe2\x80\x93 。

\n

\r\n

\r\n

keepDatalistOptions(\'.keepDatalist\');\n\nfunction keepDatalistOptions(selector = \'\') {\n  // select all input fields by datalist attribute or by class/id\n  selector = !selector ? "input[list]" : selector;\n  let datalistInputs = document.querySelectorAll(selector);\n  if (datalistInputs.length) {\n    for (let i = 0; i < datalistInputs.length; i++) {\n      let input = datalistInputs[i];\n      input.addEventListener("input", function(e) {\n        e.target.setAttribute("placeholder", e.target.value);\n        e.target.blur();\n      });\n      input.addEventListener("focus", function(e) {\n        e.target.setAttribute("placeholder", e.target.value);\n        e.target.value = "";\n      });\n      input.addEventListener("blur", function(e) {\n        e.target.value = e.target.getAttribute("placeholder");\n      });\n    }\n  }\n}

\r\n

<div style="display:flex; gap:1em;">\n  <div>\n    <h3>Keep datalist options</h3>\n    <input class="keepDatalist" type="text" list="data" value="apple">\n    <datalist id="data">\n  <option value="apple">\n  <option value="orange">\n  <option value="banana">\n</datalist>\n  </div>\n  <div>\n    <h3>Default behavior</h3>\n    <input type="text" list="browser" value="">\n    <datalist id="browser">\n  <option value="firefox">\n  <option value="opera">\n  <option value="safari">\n</datalist>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

主要概念基本相同：

\n

\n
1. 将当前输入值保存到 placeholder 属性
\n
2. 重置焦点值以显示所有数据列表选项
\n
3. 将实际输入值与输入上的占位符交换
\n

\n

此函数还会更新输入事件 \xe2\x80\x93 上的当前值，否则在通过 Tab 键导航到下一个输入后您将丢失当前值。

\n

为什么你不应该破坏表单元素的默认行为

\n

例如， Firefox 不会接受这个 hack \xe2\x80\x93，可能有充分的理由。

\n

在处理表单时，您的首要任务始终应该是：

\n

\n
• 可靠性：
  \n即使在不太现代的浏览器中也可以成功提交表单数据
\n
• 可访问性： \n自定义黑客也应该适用于使用NVDA
  等屏幕阅读器的视障人士或 JAWS
\n

\n

因此，如果您的自定义表单元素行为提供了可靠且可预测的用户体验，您应该始终进行“三重/四重检查”。

\n

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

<datalist> 使用自动完成功能,这是正常的行为.

例如,如果将输入值设置为"o",您将在datalist选项中看到橙色.它从第一个字母检查单词.但是,如果将输入值设置为"a",则根本不会看到选项.

因此,如果您已经在输入中具有值,则除了该值(如果存在)之外,数据列表选项中不会显示任何内容.它的行为与select不同.

解决方法是使用这样的jquery,例如:

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

完整测试:https://jsfiddle.net/yw5wh4da/

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