logo标签列表

输入文本框内的图片

javascriptjqueryhtmlcss
49
如何创建自定义输入文本元素，使图像可以与文本一起组合显示？ 基本上这些图像是从CDN加载的表情符号。
澄清： 我想要实现的是一个元素，其中可以作为输入内容的一部分包含图像。
7
一切始于研究，然后不断试错。当你卡住时，来这里说一下你尝试了什么，以及在哪里失败了。然后大家会帮助你。 - Wim Ombelets
我已经进行了研究，但没有找到符合我的需求的匹配结果。我知道所见即所得编辑器，但深入代码可能会增加负担。 - Elimination
display:inline？这是你想要的吗？ - Downgoat
基本上这些图像都是以PNG格式存储的，并从CDN加载。 - Elimination
2
这有帮助吗？让我的文本框理解html img标签 它涉及到表情符号等内容，但可能会指引你朝正确的方向前进。最重要的部分是第一段使用“contentEditable”，这里是Mozilla的信息。 - JasonWilczak
显示剩余3条评论
5个回答
82

在 contenteditable元素 中使用 <img> 元素：

虽然直接在 <input type="text" /> 元素中放置 <img> 元素是不可能的，但是您可以通过使用 contenteditable元素 并将 <img> 元素放置在其中来实现类似的效果。

这里是一个使用 Twitter 的 Emoji 图像 在 contenteditable 元素内的示例：

[contenteditable] {
  border: 1px solid #000;
  line-height: 1.4em;
  -webkit-appearance: textfield;
  appearance: textfield
}
img {
  vertical-align: top;
  max-height: 1.4em;
  max-width: 1.4em;
}
<p>This looks like an <code>input</code> element:</p>

<div contenteditable="true">
  See: <img src="//i.stack.imgur.com/nO2hl.png"/> <img src="//i.stack.imgur.com/iUDpH.png"/> You can even copy/paste these images within this field <img src="//i.stack.imgur.com/QrKSV.png"/>
</div>

你还可以添加一些JavaScript代码，动态地将图片/图标插入到字段中。如果你想变得更加高级，你可以在光标位置插入图片。 

document.querySelector('.selectable-icons').addEventListener('click', function(e) {
  if (e.target.tagName.toLowerCase() === 'img') {
    document.querySelector('[contenteditable]').appendChild(e.target.cloneNode(true));
  }
});
[contenteditable] {
  border: 1px solid #000;
  margin: 0.4em 0;
  line-height: 1.4em;
  -webkit-appearance: textfield;
  appearance: textfield;
}
img {
  vertical-align: top;
  max-height: 1.4em;
  max-width: 1.4em;
}
.selectable-icons img {
  cursor: pointer;
}
<p>Just click on an icon to add it.</p>

<div class="custom-input">
  <div class="selectable-icons">
    <img src="//i.stack.imgur.com/nO2hl.png" /><img src="//i.stack.imgur.com/IkjJW.png" /><img src="//i.stack.imgur.com/QrKSV.png" /><img src="//i.stack.imgur.com/sZpOK.png" /><img src="//i.stack.imgur.com/d7HIy.png" /><img src="//i.stack.imgur.com/iUDpH.png" /><img src="//i.stack.imgur.com/IjpTt.png" /><img src="//i.stack.imgur.com/rDCTA.png" /><img src="//i.stack.imgur.com/YtkL1.png" /><img src="//i.stack.imgur.com/wPXCd.png" />
  </div>
  <div contenteditable="true">
    You can type here. Add an icon.
  </div>
</div>

在<input>元素中使用Unicode:

如果不可行，您将需要使用Unicode字符。这就是iOS和Android设备上的Emoji字符如何工作的。

例如，您可以在<input>元素中使用Font 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;" />

2
我怎么从来没有听说过这个？ - But those new buttons though..
3
无法在输入框中渲染标签，但另一个简单的解决方案是将标签放置为“纯文本”并在容器中显示。
注： 1. 下面的示例可以扩展到删除整个标签<.. / >，尽管现在未实现。 2. 这种解决方案存在是因为你有某些原因不想使用@josh-crozier描述的contenteditable。 3. 这种解决方案可以利用一个隐藏的文本输入，在显示中您将看到使用虚拟键盘（如智能手机键盘）的结果。
在这个例子中，您可以单击表情符号并将它们附加到光标位置，当您单击输入时，光标会移到输入的最后位置。 

var $emoji = $('.emoji');
var $content = $('.content');
var $display = $('.display');

var initial = 'I know that you are <img class="emoji" src="//i.stack.imgur.com/iUDpH.png"> now';
$content.val(initial);
$display.html($content.val());

$emoji.click(function() {
    var html = $(this)[0].outerHTML;
    insertText(html);
    $display.html($content.val());
});

$content.on('change keyup paste', function(){
    $display.html($content.val());
});

$content.focus(function(){
  this.selectionStart = this.selectionEnd = this.value.length;
});

function insertText(text){
    var cursorPosition = $content.prop('selectionStart');
    var value = $content.val();
    var textBefore = value.substring(0,  cursorPosition );
    var textAfter  = value.substring( cursorPosition, value.length );
    value = textBefore  + text + textAfter;
    $content.val(value);
    $content.prop('selectionStart', value.length);
    $content.focus();
}
.display {
  border: 1px solid #000;
  line-height: 1.4em;
   min-height: 20px;
}
.display img {
  vertical-align: top;
  width: 1.4em
}
<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
你需要为这些结果编写自己的所见即所得编辑器。或者你可以查看此前的问题。
简而言之： 方法：如果文本与笑脸图案匹配并且笑脸匹配，则必须阅读用户输入的每个文本，然后从图像文件夹中获取相应的 .gif。有关快速入门，请参阅以下链接。用图片替换表情符号列表 希望这可以帮助你!
1

在这里，我已经在contenteditable中的任何地方添加了表情符号。

[contenteditable=true] {border: 1px solid #000;margin: 0.4em 0;line-height: 1.4em;-webkit-appearance: textfield;appearance: textfield; }
[contenteditable=true]:empty:before {content: attr(placeholder);display: block; /* For Firefox */}
.selectable-icons img { cursor: pointer;vertical-align: top;max-height: 2.4em;max-width: 2.4em; }

<div  id="content" placeholder="Max 10 char with emoji" class="form-control custom_text" contenteditable="true"></div>


    function pasteHtmlAtCaret(html, selectPastedContent) {
                var sel, range;
                if (window.getSelection) {
                    // IE9 and non-IE
                    sel = window.getSelection();
                    if (sel.getRangeAt && sel.rangeCount) {
                        range = sel.getRangeAt(0);
                        range.deleteContents();

                        // Range.createContextualFragment() would be useful here but is
                        // only relatively recently standardized and is not supported in
                        // some browsers (IE9, for one)
                        var el = document.createElement("div");
                        el.innerHTML = html;
                        var frag = document.createDocumentFragment(), node, lastNode;
                        while ( (node = el.firstChild) ) {
                            lastNode = frag.appendChild(node);
                        }
                        var firstNode = frag.firstChild;
                        range.insertNode(frag);

                        // Preserve the selection
                        if (lastNode) {
                            range = range.cloneRange();
                            range.setStartAfter(lastNode);
                            if (selectPastedContent) {
                                range.setStartBefore(firstNode);
                            } else {
                                range.collapse(true);
                            }
                            sel.removeAllRanges();
                            sel.addRange(range);
                        }
                    }
                } else if ( (sel = document.selection) && sel.type != "Control") {
                    // IE < 9
                    var originalRange = sel.createRange();
                    originalRange.collapse(true);
                    sel.createRange().pasteHTML(html);
                    if (selectPastedContent) {
                        range = sel.createRange();
                        range.setEndPoint("StartToStart", originalRange);
                        range.select();
                    }
                }
            }
 // Onclick emoji add in custom text
        $('#select-emoji a').click(function() {
            document.getElementsByClassName('custom_text')[0].focus();
            pasteHtmlAtCaret($(this).html(), false);
            return false;
        });
0

你也可以这样做

.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">​
OP特别指出“可能包含图像作为输入的一部分”，图像是复数形式，并且是输入的一部分，但这并不是。虽然这对于一个图像作为背景来说可以工作，但是当提交时，该图像将不会被视为输入的一部分。 - c-chavez
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接