Bir giriş metin içine görüntüleri
Nasıl metin ile birlikte görüntüleri birleştirme sağlayan özel giriş, metin öğesi oluşturabilirim?
Esasında bu görüntüleri ifadeleri bir VİDEO yükledi.
AÇIKLAMA:
Uygulamak istiyorum ne olabilir <input type="text" />
bir unsurduriçerirgiriş parçası olarak görüntüler.
CEVAP
contenteditable
element içinde <img>
öğeleri:
Süre değil, doğrudan olası bir yere <img>
elementler içinde <input type="text" />
elementler elde edebilirsiniz benzer bir şey kullanarak bir contenteditable
element ve yerleştirme <img>
öğesi içinde.
İşte bir örnek Twitter's Emoji images içinde kullanma contenteditable
bir element:
[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>
Ayrıca dinamik olarak eklemek için JavaScript alanına resim/simge ekleyebilirsiniz. Eğer fantezi almak istiyorsanız, şapka konumunda resmi ekleyin.
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>
bir elementin içinde unicode kullanarak:
Eğer bu mümkün değilse, unicode karakterleri kullanmak gerekir. Emoji characters iOS ve Android cihazlar üzerinde çalışıyor.
Örneğin, <input>
bir öğe içinde Font Awesome unicode karakterler kullanabilirsiniz. Aynı şekilde, simgeleri kendi kütüphane/resimler yapmak ve unicode karakterleri ile kendilerini temsil:
<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: ✔ ☹ ☺" />
Bir DIV bloğu içine CSS Center metin (...
Nasıl şifreler için benim giriş içine ...
Giriş metin iletişim Android...
Nasıl sayfa yük üzerinde form giriş me...
Nasıl bir metin giriş düzenlenemez yap...