如何创建自定义输入文本元素,使图像可以与文本一起组合显示?
基本上这些图像是从CDN加载的表情符号。
澄清: 我想要实现的是一个元素,其中可以作为输入内容的一部分包含图像。
澄清: 我想要实现的是一个元素,其中可以作为输入内容的一部分包含图像。
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>
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:   " />
<p>Standard unicode:</p>
<input type="text" value="See: ✔ ☹ ☺" />
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="" />
在这里,我已经在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;
});
你也可以这样做
.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">
display:inline
?这是你想要的吗? - Downgoat