Метод jQuery attr() добавляет html-тег

У меня есть тег search input, и я хотел установить placeholder. В место держателя мне нужно сохранить значок увеличения, как это сделать в jquery? Ниже приведен код, который я пробовал

$('.gridjs-head .gridjs-search .gridjs-search-input').attr("placeholder", "<i class='mdi mdi-magnify'></i>&nbsp;Search...")

Мне нужно было использовать этот путь, потому что я использую grid.js для рендеринга таблицы в моем проекте django

Попробуйте следующий код:

$('.gridjs-head .gridjs-search .gridjs-search-input').attr("placeholder", $.parseHTML("&#61442;")[0].data);

Поскольку вы не можете включить html-код внутрь атрибута placeholder, вы не можете использовать стратегию css class для стилизации его текста.

Используя последовательность символов Юникода, это ключ.

В этом демо я показал два способа встраивания внутри атрибута placeholder:

  • определяется в html как &#xf0349;
  • устанавливается через javascript, преобразующий юникод в строку перед составлением строки

При обходе стратегии css-классов ожидается, что вы установите font-family как Material Design Icons, что я и сделал, определив правило для input::placeholder.

В этом демонстрационном примере используется элемент ввода test, который javascript извлекает с помощью селектора id. Вы должны просто заменить его своим селектором .gridjs-head .gridjs-search .gridjs-search-input, но поскольку я использовал vanilla js вместо jQuery, это потребует от вас цикла для каждого элемента, возвращенного в коллекции, перед вызовом .setAttribute()

const toBaseDecimal = parseInt("f0349", 16);
const toString = String.fromCodePoint(toBaseDecimal);
document.getElementById('test').setAttribute("placeholder", `${toString} Search`);
input::placeholder {    
    opacity: .5;
    color: red;    
    padding-left: 10px;    
    font-family: "Material Design Icons";
}

div{
  margin-bottom: 1rem;
}
<link href="//cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label for="test">This placeholder was set with javascript:</label>
  <br>  
  <input type="text" id="test">  
</div>

<div>
  <label for="test2">This placeholder was set via html:</label>
  <br>
  <input type="text" id="test2" placeholder="&#xf0349; Search">  
</div>

<div>
  <label for="test3">This is the icon via css:</label>
  <br>
  <i class='mdi mdi-magnify'></i>
</div>

Вернуться на верх