Question

我想检查是否可以在textarea中使用datalist。我使用输入字段，但我在这里的任务要求我“将输入建议添加到带有datalist的单行文本框”。这甚至没有任何意义吗？

            <fieldset>
                <legend>
                    Välj favoritbild med hjälp av datalist - skriv i listan nedan
                </legend>
                <input list="bilar" name="bil">
                <!--<TEXTAREA list="bilar" NAME="bil" ROWS="1"></TEXTAREA>  -->
                <datalist id="bilar">
                    <option value="Dodge Viper">
                    <option value="Honda Civic">
                    <option value="Corvette Z06">
                    <option value="Volvo V70">
                    <option value="Ferrari Spider 360">
                </datalist>                 
            </fieldset>

但是，我无法使用我的textarea（上面已注释掉）。但它适用于输入元素。

任何人都知道我如何使用单行文本框进行上述示例？

Answer 1

不，因为datalist按定义与input元素相关联。此外，选择一个项目datalist意味着替换关联的input元素的整个值，而不是附加到它，如果您使用textarea的预定义替代项，通常就是这个想法元件。

对于用于文本区域输入的预先制作的备选列表的概念没有什么不合逻辑的，但目前在HTML中没有任何内容（或者据我所知，正在计划中）。不过，它可以在JavaScript中进行编码。

您可以拥有一个项目列表，例如ul列表，甚至是select元素。然后，您将添加一个JavaScript，使项目文本被写入或附加到textarea元素，例如单击某个项目或从select列表中选择

时

通常没有理由将单行文本输入字段设为textarea。它可能，只是没用，除非在非常特殊的情况下。请注意<textarea rows=1 ...>允许用户输入任意数量的行，这样做非常不方便。

Answer 2

<datalist>，Internet Explorer 10，Firefox和Opera支持Chrome标记。

请注意<datalist>及更早版本或Internet Explorer 9支持Safari标记

。

<datalist>代码指定<input>元素的预定义选项列表，用于在<input>上提供“自动填充功能”元素。用户在输入数据时会看到预定义选项的下拉列表。

您只能使用<input>元素的list属性将其与<datalist>元素绑定在一起，而不是<textarea>元素。

有关详细信息，请参阅here。

Answer 3

在这种情况下，您可以使用自动完成功能

 $('textarea').autocomplete({
      source: Object.values(<your list here>),
  });

它看起来不像输入数据列表，但很简单。

你能用HTML textarea的datalist吗？

3 个答案: