如何在字符串中使用HTML内联标签?

huangapple go评论116阅读模式
英文:

How do I use an HTML inline tag inside a string?

问题

我有一个 svg 图标(它是<kbd>Enter</kbd>键的符号):

&lt;kbd class=&quot;DocSearch-Commands-Key&quot;&gt;
    &lt;svg width=&quot;15&quot; height=&quot;15&quot; aria-label=&quot;Enter key&quot; role=&quot;img&quot;&gt;
        &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;1.2&quot;&gt;
            &lt;path d=&quot;M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3&quot;&gt;&lt;/path&gt;
       &lt;/g&gt;
   &lt;/svg&gt;
&lt;/kbd&gt;

我有一个像这样的 input 文本字段:

&lt;input type=&quot;text&quot; placeholder=&quot;Press the ENTER key&quot;&gt;

我想将 svg 图标附加到输入字段的 placeholder 中,使 placeholder 如下:

Press the <kbd><-|</kbd> key

我该如何实现这一点?

编辑: 按钮图标应该是这样的:

enter image description here

英文:

I have an svg icon (which is the symbol of the <kbd>Enter</kbd> key):

&lt;kbd class=&quot;DocSearch-Commands-Key&quot;&gt;
    &lt;svg width=&quot;15&quot; height=&quot;15&quot; aria-label=&quot;Enter key&quot; role=&quot;img&quot;&gt;
        &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;1.2&quot;&gt;
            &lt;path d=&quot;M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3&quot;&gt;&lt;/path&gt;
       &lt;/g&gt;
   &lt;/svg&gt;
&lt;/kbd&gt;

I have an input text field like this:

&lt;input type=&quot;text&quot; placeholder=&quot;Press the ENTER key&quot;&gt;

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:

enter image description here

答案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 -->

&lt;div class=&quot;input-wrapper&quot;&gt;
  &lt;input type=&quot;text&quot; placeholder=&quot; &quot;&gt;
  &lt;span class=&quot;placeholder&quot;&gt;
    Press the
    &lt;kbd class=&quot;DocSearch-Commands-Key&quot;&gt;
      &lt;svg width=&quot;15&quot; height=&quot;15&quot; aria-label=&quot;Enter key&quot; role=&quot;img&quot;&gt;
        &lt;g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;1.2&quot;&gt;
            &lt;path d=&quot;M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3&quot;&gt;&lt;/path&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
    &lt;/kbd&gt;
     key
  &lt;/span&gt;
&lt;/div&gt;

<!-- 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(&#39;input&#39;)
  if(input.value.length&gt;0)
    {
    input.style.background = &#39;none&#39;
    }
  else{
    input.style.background = `url(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;15&#39; height=&#39;15&#39; aria-label=&#39;Enter key&#39; role=&#39;img&#39;%3E%3Cg fill=&#39;none&#39; stroke=&#39;currentColor&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.2&#39;%3E%3Cpath d=&#39;M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;)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(&quot;data:image/svg+xml;charset=utf8,%3Csvg xmlns=&#39;http://www.w3.org/2000/svg&#39; width=&#39;15&#39; height=&#39;15&#39; aria-label=&#39;Enter key&#39; role=&#39;img&#39;%3E%3Cg fill=&#39;none&#39; stroke=&#39;currentColor&#39; stroke-linecap=&#39;round&#39; stroke-linejoin=&#39;round&#39; stroke-width=&#39;1.2&#39;%3E%3Cpath d=&#39;M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3&#39;%3E%3C/path%3E%3C/g%3E%3C/svg%3E&quot;)center / contain no-repeat;
background-origin:border-box;
}

<!-- language: lang-html -->

&lt;label&gt;
  &lt;input type=&quot;text&quot; placeholder=&quot;Press the           Key&quot; id=&#39;input&#39; oninput=&quot;myFunction();&quot;/&gt;
&lt;/label&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月6日 14:36:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/75027736.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定