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: ✔ ☹ ☺" />
&;&&Quot Enter quot; Windows Form için...
Metin giriş alanları için seçici CSS?...
Nasıl iPhone gibi HTML metin giriş kut...
HTML metin tüm metin seçimi giriş tıkl...
MySQL sorgu sayısı içine metin dönüştü...