jQuery attr()方法添加html标签

Question

我有一个搜索输入标记，我想设置一个占位符。在地方持有人我需要保持一个放大图标，如何在jquery中做到这一点?下面是我试过的代码

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

我需要使用这个路径，因为我使用grid.js在我的django项目中渲染表

Answer 1

请尝试下面的代码:

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

Answer 2

因为你不能在占位符属性中包含html代码，所以你不能使用css类策略来样式化它的文本。

使用unicode字符序列，它是键。

在这个演示中，我展示了两种将其嵌入占位符属性的方法:

• 在html中定义为󰍉
• 设置通过javascript转换在组成字符串
之前将unicode转换为string。

当绕过css类策略时，您期望将font-family设置为我为input::placeholder定义规则的Material Design Icons。

这个演示使用了javascript使用id选择器检索的输入元素test。你应该把它替换为你的选择器.gridjs-head .gridjs-search .gridjs-search-input，但因为我使用的是香草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>