javascript-输入tex内的图像

如何创建自定义输入文本元素,以将图像与文本结合在一起?

基本上,这些图像是从CDN加载的图释。

澄清:
我希望实现的是<input type="text" />元素,该元素可能包含图像作为输入的一部分。

Elimination asked 2020-02-29T11:56:07Z
4个解决方案
76 votes

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素内使用<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素:

虽然无法直接将<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素放置在<input type="text" />元素内,但可以通过使用<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素并将<img>元素放置在其中来实现类似的效果。

这是在<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素内使用Twitter的表情符号图像的示例:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />

您还可以添加一些JavaScript以将图像/图标动态插入字段中。 如果想花哨的话,可以将图像插入插入符号的位置。

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />


<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素内部使用unicode:

如果这不可行,则必须使用unicode字符。 这就是表情符号字符在iOS和Android设备上的工作方式。

例如,您可以在<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <p>Font awesome icons (unicode):</p> <input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" /> <p>Standard unicode:</p> <input type="text" value="See: &#x2714; &#x2639; &#x263a;" />元素中使用Awesome字体Unicode字符。 同样,您可以创建自己的图标/图像库,并用Unicode字符表示它们:

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>Font awesome icons (unicode):</p>
<input type="text" class="fa" value="See: &#xf179; &#xf118; &#xf16c;" />


<p>Standard unicode:</p>
<input type="text" value="See: &#x2714; &#x2639; &#x263a;" />

Josh Crozier answered 2020-02-29T12:04:53Z
3 votes

无法在输入中呈现<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Select emoji to insert: <p> <img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/> <img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/> </p> Result: <div class="display"> </div> Edit: <input type="text" class="content" value="" />标签,但另一个简单的解决方案是将标签作为纯文本放置并显示在容器中。

笔记:

  1. 下面的示例可以扩展为删除整个标签<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Select emoji to insert: <p> <img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/> <img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/> </p> Result: <div class="display"> </div> Edit: <input type="text" class="content" value="" />,尽管现在尚未实现。

  2. 存在此解决方案的原因是,由于某些原因,您不想使用@ josh-crozier所述的<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> Select emoji to insert: <p> <img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/> <img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/> </p> Result: <div class="display"> </div> Edit: <input type="text" class="content" value="" />

  3. 该解决方案可以利用隐藏的文本输入,并且在显示中您将使用虚拟键盘(如智能手机键盘)看到结果。

在此示例中,您可以单击图释并将其附加在插入标记的位置,然后单击输入时,光标将移至输入的最后一个位置。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select emoji to insert:
<p>
<img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/>
<img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/>
</p>


Result:
<div class="display">
 
</div>
Edit:
<input type="text" class="content" value="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select emoji to insert:
<p>
<img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/>
<img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/>
</p>


Result:
<div class="display">
 
</div>
Edit:
<input type="text" class="content" value="" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Select emoji to insert:
<p>
<img class="emoji" src="//i.stack.imgur.com/nO2hl.png"/>
<img class="emoji" src="//i.stack.imgur.com/iUDpH.png"/>
</p>


Result:
<div class="display">
 
</div>
Edit:
<input type="text" class="content" value="" />

adricadar answered 2020-02-29T12:09:51Z
2 votes

您必须为这些结果编写自己的WYSIWYG编辑器。 或者,您可以查看之前的问题。

简而言之:

方法:您必须阅读用户输入的每个文本(如果有的话)   匹配微笑的模式,如果匹配,则获取   images文件夹中的相应.gif。

请参考以下链接以快速入门。    将表情符号列表替换为其图片

我希望这有帮助!

Kleigh answered 2020-02-29T12:10:30Z
1 votes

你也可以这样

.inputimage{
    background:#FFFFFF url(left_arrow.gif) no-repeat 4px 4px;
    padding:4px 4px 4px 22px;
    height:18px;
}​

您在该班级输入的内容

<input type="text" name="sample" class="inputimage">​
Syed Asif answered 2020-02-29T12:10:54Z
translate from https://stackoverflow.com:/questions/29579557/images-inside-an-input-text