HTML как установить значение <input type = "number"> в бесконечность

Question

У меня есть числовой ввод, который я хочу держать целыми числами. Если значение установлено в отрицательное значение, то я хочу, чтобы показанный символ был ∞ (∞).

Это не работает (вместо "∞" отображается пробел):

<%
if foo <= -1
    v = '&#8734;'
else
    v = foo
end
%>
<input type="number" value="<%= v %>">

Есть ли способ сделать это, не прибегая к JavaScript?

Answer 1

Каковы ваши требования для наличия поля "номер"? Можете ли вы положиться на проверку формы и использовать Javascript для постепенного улучшения просто ввода цифр. Тогда используйте что-то вроде этого

<input type="text" pattern="([0-9]|&#8734;)+">

(pattern запретит отправку формы, если это не число или символ бесконечности)

Answer 2

Вам нужно использовать тип text для этого поля и преобразовать знак бесконечности, используя CGI::unescapeHTML

<% 
   if foo <= -1
     v = CGI::unescapeHTML('&#8734;')
   else
     v = foo
   end
%>
<input type="text" value="<%= v %>">

Answer 3

этот вопрос немного устарел, но если у кого-то еще есть такая же проблема, это было мое решение, оно немного дряблое, но оно работает:

      <input type="text" id="myInput" value="&#8734">

<script>
document.getElementById("myInput").addEventListener("focus", (e) => {
    e.target.type = "number";
});
document.getElementById("myInput").addEventListener("blur", (e) => {
    if(e.target.value == 0 || isNaN(e.target.value)){
        e.target.type = "text";
        e.target.value = "∞";
    }
});
</script>

Вы можете проверить код здесь

Хорошая вещь в этом подходе заключается в том, что пользователь все еще может использовать стрелки для увеличения / уменьшения числа, поскольку тип по-прежнему "число".