Можно ли повторно использовать datalist для нескольких элементов?

я определил его и поместили в <head> тег:Можно ли повторно использовать datalist для нескольких элементов?

<datalist id="colors"> 

    <option>#ff0000</option> <!-- red   --> 
    <option>#FF5100</option> <!-- red orange  --> 
    <option>#FF7F00</option> <!-- orange   --> 
    <option>#FFBE00</option> <!-- yellow orange --> 
    <option>#FFFF00</option> <!-- yellow   --> 

    <option>#C0FF00</option> <!-- yellow green --> 
    <option>#00FF00</option> <!-- green --> 
    <option>#007F7F</option> <!-- Blue Green  --> 
    <option>#0000FF</option> <!-- Blue --> 
    <option>#5C00FF</option> <!-- Blue Violet --> 

    <option>#7F00FF</option> <!-- Violet   --> 
    <option>#BF007F</option> <!-- Red Violet  --> 
    <option>#FFFFFF</option> <!-- White   --> 
    <option>#DADADA</option> <!-- Gray1   --> 
    <option>#B6B6B6</option> <!-- Gray2   --> 

    <option>#929292</option> <!-- Gray3   --> 
    <option>#6D6D6D</option> <!-- Gray4   --> 
    <option>#494949</option> <!-- Gray5   --> 
    <option>#242424</option> <!-- Gray6   --> 
    <option>#000000</option> <!-- Black   --> 

</datalist>

и это похоже на работу, но я получаю ошибки:

Unexpected end tag (head) - ignored.

Где я должен поставить его?

источник

2014-06-29 Brad

Зачем вы поместите его в тег ''? Добавьте его в '' – Morpheus

Ни по какой другой причине, чем я не знаю, где ее поставить. – Brad

Вы должны поместить его точно в том месте, где вы хотите, чтобы оно появилось в вашем документе .. между и, вероятно, должно добавить значения к этим параметрам. – webkit

Чтобы ответить на первый вопрос в названии: да, вы можете использовать один и тот же datalist элемент в нескольких элементов управления, используя его значение id атрибута в различных input элементов, например, «Где я должен поставить его»

<datalist id="colors">...</datalist> 
<label for="car">Color of your car:</label> <input type="color" id="car" list="colors"> 
<label for="tie">Color of your tie:</label> <input type="color" id="tie" list="colors">

Что касается вопроса, говорит о HTML5 LC datalist:

контексты, в которых можно использовать этот элемент: Где ожидается содержание фразировки.

Это означает почти любое место внутри документа body, но не в head. При правильном использовании его размещение не имеет значения, поскольку оно не создает видимого контента как такового. Вы можете положить его, например.прямо перед (или после) первого элемента input, который ссылается на него, или, если хотите, в начале или конце body.

Однако если использование разметки, как <option>#ff0000</option>, а напротив <option value="#ffff00">, в этом контексте, то вопросы размещения, так как теперь видно содержимое (струнные # ff0000). В старых браузерах, которые не поддерживают элемент datalist, такое содержимое будет показано там, где вы поместите элемент.

Если вы используете <input type="color">, что кажется вероятным, вам следует подумать о том, что происходит в IE, который не поддерживает этот тип элемента. Проблема в том, что достаточно новые версии поддержки IE datalist, но даже IE 11 по-прежнему реализует атрибут метки <input type="color"> as a simple text box, .

<option value="#ff0000" label="red"> 
    <option value="#FF5100" label="red orange">

В этом подходе datalist элемент все еще может быть размещен практически в любом месте внутри body и может ссылаться на более чем один элемент input.

источник

2014-06-29 12:10:02

Отличный ответ! спасибо – Brad

Использование каждой опции не

<option>...</option><option value="..."> но

источник

2014-06-29 11:26:37 user3279848

Спасибо. Имеет смысл! – Brad

Это может быть полезной информацией, но это не относится к заданному вопросу. –

Я запустить скелет фрагмент кода ниже в этих браузерах:

Chrome 35 Mac -> Работает отлично
Mozilla 30 Mac -> Прекрасно работает, но не контролирует список, только пустое поле ввода
IE 11 -> отлично работает, нет контроля над списком.
Из IE 9 вниз страница получает скремблирование.
Safari 7.0.4 не может справиться с этим, он не отображает список. Нужно, наверное, некоторые другие детали.

Таким образом, ваша ошибка возникает, возможно, из другого аспекта.

В соответствии с спецификациями HTML5, элемент должен использоваться там, где размещается «Фраза содержания». http://www.w3.org/TR/html5/forms.html#the-datalist-element. Это текст документа, как я вижу, то <body>: http://www.w3.org/TR/html5/dom.html#phrasing-content-1

EDIT: Иногда полезно пойти в старые добрые W3 валидатор: http://validator.w3.org/check

Если я поставил datalist в глава, валидатор сообщает что-то о «блуждающем теге головы». Поэтому это должно быть одним из источников проблемы.

Отрывок:

<html> 
     <head> 
     <datalist id="colors"> 
      <option>#ff0000</option> <!-- red   --> 
      <option>#FF5100</option> <!-- red orange  --> 
      <option>#FF7F00</option> <!-- orange   --> 
      <option>#FFBE00</option> <!-- yellow orange --> 
      <option>#FFFF00</option> <!-- yellow   --> 
      <option>#C0FF00</option> <!-- yellow green --> 

      <option>#00FF00</option> <!-- green --> 
      <option>#007F7F</option> <!-- Blue Green  --> 
      <option>#0000FF</option> <!-- Blue --> 
      <option>#5C00FF</option> <!-- Blue Violet --> 

      <option>#7F00FF</option> <!-- Violet   --> 
      <option>#BF007F</option> <!-- Red Violet  --> 
      <option>#FFFFFF</option> <!-- White   --> 
      <option>#DADADA</option> <!-- Gray1   --> 
      <option>#B6B6B6</option> <!-- Gray2   --> 

      <option>#929292</option> <!-- Gray3   --> 
      <option>#6D6D6D</option> <!-- Gray4   --> 
      <option>#494949</option> <!-- Gray5   --> 
      <option>#242424</option> <!-- Gray6   --> 
      <option>#000000</option> <!-- Black   --> 
    </datalist> 
    </head> 
<body> 

    <input list="colors" /> 

</body> 
</html>

источник

2014-06-29 11:39:59

Можно ли повторно использовать datalist для нескольких элементов?

ответ

Смежные вопросы