英文:
How do I use an HTML inline tag inside a string?
问题
我有一个 svg
图标(它是<kbd>Enter</kbd>键的符号):
<kbd class="DocSearch-Commands-Key">
<svg width="15" height="15" aria-label="Enter key" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg>
</kbd>
我有一个像这样的 input
文本字段:
<input type="text" placeholder="Press the ENTER key">
我想将 svg
图标附加到输入字段的 placeholder
中,使 placeholder
如下:
Press the <kbd><-|</kbd> key
我该如何实现这一点?
编辑: 按钮图标应该是这样的:
英文:
I have an svg
icon (which is the symbol of the <kbd>Enter</kbd> key):
<kbd class="DocSearch-Commands-Key">
<svg width="15" height="15" aria-label="Enter key" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg>
</kbd>
I have an input
text field like this:
<input type="text" placeholder="Press the ENTER key">
I want to append the svg
icon inside the placeholder
of the input field, such that the placeholder
is like
> Press the <kbd><-|</kbd> key
How do I achieve this?
EDIT: The button icons should be like this:
答案1
得分: 1
你不能使用 placeholder
属性来实现这个,因为它只支持文本。
如果你的图标可以是字体图标,你可以像这样做:在 Placeholder 中使用 Font Awesome 图标。
还有一种解决方法,你可以使用 :placeholder-shown
伪类来模拟一个占位符,所以 "占位符" 可以是任何东西。
例如:
.input-wrapper {
position: relative;
}
.input-wrapper .placeholder {
display: none;
height: 100%;
top: 0;
left: 8px;
align-items: center;
position: absolute;
pointer-events: none;
opacity: 0.5;
font-size: 0.8em;
}
.input-wrapper input:placeholder-shown + .placeholder {
display: flex;
}
/* customization */
input {
padding: 6px;
}
.DocSearch-Commands-Key {
border: solid 1px #ccc;
border-radius: 4px;
height: 16px;
display: flex;
align-items: center;
margin: 0 4px;
margin-top: -1px;
padding: 0 4px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
background-color: #eee;
}
<div class="input-wrapper">
<input type="text" placeholder=" ">
<span class="placeholder">
Press the
<kbd class="DocSearch-Commands-Key">
<svg width="15" height="15" aria-label="Enter key" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg>
</kbd>
key
</span>
</div>
英文:
You can't do it with placeholder
property since it only supports text.
If your icon can be a font icon, you could do it as Use Font Awesome Icon in Placeholder.
There's a workaround that you could fake a placeholder using :placeholder-shown
pseudo class, so the "placeholder" can be anything.
For example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.input-wrapper {
position: relative;
}
.input-wrapper .placeholder {
display: none;
height: 100%;
top: 0;
left: 8px;
align-items: center;
position: absolute;
pointer-events: none;
opacity: 0.5;
font-size: 0.8em;
}
.input-wrapper input:placeholder-shown + .placeholder {
display: flex;
}
/* customization */
input {
padding: 6px;
}
.DocSearch-Commands-Key {
border: solid 1px #ccc;
border-radius: 4px;
height: 16px;
display: flex;
align-items: center;
margin: 0 4px;
margin-top: -1px;
padding: 0 4px;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.4);
background-color: #eee;
}
<!-- language: lang-html -->
<div class="input-wrapper">
<input type="text" placeholder=" ">
<span class="placeholder">
Press the
<kbd class="DocSearch-Commands-Key">
<svg width="15" height="15" aria-label="Enter key" role="img">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2">
<path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3"></path>
</g>
</svg>
</kbd>
key
</span>
</div>
<!-- end snippet -->
答案2
得分: 0
首先,您需要将您的SVG转换为URI以用作背景。我使用了以下网站将SVG转换为URI SVG to CSS background-image converter。然后,您需要调整输入字段的宽度,以使其显示在文本的中心。您还可以调整SVG的宽度,以在单词之间进行调整。
<label>
<input type="text" placeholder="Press the Key" id='input' oninput="myFunction();"/>
</label>
label {
position: relative;
}
input {
padding: 10px 10px;
width: 150px;
border: none;
border-left: 2px solid black;
outline: none;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat;
background-origin: border-box;
}
function myFunction()
{
let input = document.getElementById('input')
if(input.value.length>0)
{
input.style.background = 'none'
}
else{
input.style.background = `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat`;
}
}
英文:
First, you need to convert your SVG to URI to use as a background.
I used the following site to convert the SVG to URI
SVG to CSS background-image converter
Then you need to adjust the width of your input field to show it in the centre of the text.
You can also adjust the width of the SVG to adjust it between words.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function myFunction()
{
let input = document.getElementById('input')
if(input.value.length>0)
{
input.style.background = 'none'
}
else{
input.style.background = `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat`;
}
}
<!-- language: lang-css -->
label {
position: relative;
}
input {
padding: 10px 10px;
width: 150px;
border: none;
border-left: 2px solid black;
outline: none;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' aria-label='Enter key' role='img'%3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2'%3E%3Cpath d='M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")center / contain no-repeat;
background-origin:border-box;
}
<!-- language: lang-html -->
<label>
<input type="text" placeholder="Press the Key" id='input' oninput="myFunction();"/>
</label>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论