Как в Input в val добавить html code?

Question

Когда я в input value прописываю html-code (&#8734), то строка становится пустой. Как правильно в input прописать html-code?

$('#element').val('&#8734');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="element" type="number" value="" />

Answer 1

Вам нужно все закодированные символы превратить в обычную строку, и потом записать в значение поля:

let strWithCodes = '&#8734 &#8734!!!&#8734XXX&#8734';
let str = strWithCodes.replace(/(&#\d+)/g, (matchedSubstr, matchedPart) => {
  return String.fromCharCode(matchedPart.substr(2));
});
let input = document.body.querySelector('.my-input');
input.value = str;

<input type="text" class="my-input">

Если применить не простую замену в строке, а парсинг символов в HTML, то становятся возможны атаки. То есть запись символов в инпут должна идти без этапа обёртки в jQuery и без innerHTML и подобных методов.

Answer 2

Извращение, но работает, если ; не забывать:

$('input').val($($.parseHTML('&#8734;')).text())

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input>

Внимание: этот код опасен:

$('input').val($($.parseHTML('<img src="ee" onerror="console.log(1)">')).text())

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input>

А лучше не выпендриваться и писать прям символом:

$('input').val('∞')

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input>

Answer 3

В input с типом number нельзя писать всякий мусор. Но можно использовать placeholder и стилизовать его под значение, дополнительно повесив класс, ккоторому эти стили приписаны:

.inf::placeholder {
  color: inherit;
}

<input type="number" placeholder="&#8734;" class="inf">

БЛОГ НА HUSL

Как в Input в val добавить html code?

Ответы (3 шт):