7

我想检查是否可以将 datalist 与 textarea 一起使用。我让它与输入字段一起工作，但我在这里的任务要求我“将输入建议添加到带有 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 一起使用（上面已注释掉）。但是，它适用于输入元素。

任何人都知道我怎样才能让上面的示例使用单行文本框？

4

3 回答 3

5

No, because datalist by definition associates with an input element. Moreover, selecting an item drom a datalist means replacing the entire value of the associated input element, instead of appending to it, which normally be the idea if you used predefined alternatives for a textarea element.

There is nothing illogical with the idea of a pre-made list of alternatives to use for text area input, but there is nothing for it in HTML at present (or being planned, as far as I known). It can be coded rather simply in JavaScript, though.

You can have a list of items, for example as a ul list, or even as a select element. You would then add a little JavaScript that causes the item text to be written or appended to the textarea element e.g. when an item is clicked on or a selection is made from a select list

There is normally no reason to have a single-line text input field as a textarea. It’s possible, just not useful, except perhaps in very special cases. Note that <textarea rows=1 ...> lets the user enter any number of lines, it just makes that very inconvenient.

于 2014-05-09T10:29:17.373 回答
1

、、和支持<datalist>标签。Internet Explorer 10FirefoxOperaChrome

请注意，该<datalist>标记在早期版本Internet Explorer 9或Safari.

标签指定元素的<datalist>预定义选项列表，<input>它用于为元素提供“自动完成”功能。<input>用户在输入数据时将看到一个预定义选项的下拉列表。

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

有关更多详细信息，请参见此处。

于 2014-05-09T07:57:43.847 回答
0

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

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

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

于 2019-08-02T07:39:14.480 回答