Datalist não funciona com input tipo número

[FabianoSouza 5]

              <label for="nota-de-corte" title="Nota de corte">Nota de corte</label>
              <input type="text" name="nota-de-corte" id="nota-de-corte" list="notas">
              <datalist id="notas">
                <option value="4.0">
                <option value="4.5">
                <option value="5.0">
                <option value="5.5">
                <option value="6.0">
                <option value="6.5">
                <option value="7.0">
                <option value="7.5">
                <option value="8.0">
                <option value="8.5">
              </datalist>

O código acima funciona normalmente. Basta dar dois cliques na input text que abre uma lista.

Mas não funciona se a input for do tipo "number".

Podem me ajudar?

 

Obrigado.

[L. Henrique 179]

Sua pergunta não ficou muito clara, amigo.
Você quer uma datalist com valores numéricos, sendo que, a atual funciona normalmente. Quais seriam os problemas nesse caso? É necessário a input tipo "number"? Qual seria a diferença, já que, nesse caso, qualquer JS conseguiria identificar de mesma forma os valores?

[FabianoSouza 5]

É.. gostaria que funcionasse com a INPUT tipo number para manter a semântica.

Pois nota é uma informação numérica (no meu caso).

 

Gosto de usar o tipo de INPUT conforme o tipo de informação que será digitada nela.

Email com input tipo email, data com input tipo data e assim por diante.

[L. Henrique 179]

Certo, se você quer criar uma input de seleção de nota (ou cálculo), o uso do Input "number" não é o correto. Esse tipo de método diz que, no input, ele é capaz de inserir números de 0 a N. Para que o datalist numérico funcione, é necessário a opção <select>.

 

Veja exemplo abaixo:

<label for="nota-de-corte" title="Nota de corte">Nota de corte</label>
   <select name="selecao" id="notas">
       <option value="4.0">4.0</option>
       <option value="4.5">4.5</option>
       <option value="5.0">5.0</option>
       <option value="5.5">5.5</option>
       <option value="6.0">6.0</option>
       <option value="6.5">6.5</option>
       <option value="7.0">7.0</option>
       <option value="7.5">7.5</option>
       <option value="8.0">8.0</option>
       <option value="8.5">8.5</option>
   </select> 

Se preferir já visualizar, acompanha o JSFiddle: http://jsfiddle.net/o90pdfj6/
Veja se entende o exposto, caso contrário, tentaremos de outra forma resolver seu problema.

[FabianoSouza 5]

Sim, sua solução está clara.

Eu estava querendo evitar o uso do SELECT porque não tem como o usuário inservir um valor manualmente.

Usando uma input text ou input number mais um datalist permite que o usuário adicione um valor que não consta na lista de opções.

 

Exemplo, o usuário poderia digitar diretamente dentro a input o valor 7.7. É um valor que não consta na datalista mas ainda assim estaria dentro do contexto. Com o select isso não é possível.

 

Se tiver outra saída, ficaria agradecido. Caso contrário usarei com select mesmo.

[William Bruno 1501]

@FabianoSouza, creio que o datalist só funcione com o input type="text" mesmo, ou por falta de suporte dos browsers ou por uma brecha na especificação.

 

Ai uma solução é vc usar o type "não semântico" e validar (pode usar o atributo pattern por exemplo).

[FabianoSouza 5]

Olá William. Vai ter que ser o jeito.

 

Valew galera!