SORU
11 NİSAN 2015, CUMARTESİ

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
13 NİSAN 2015, PAZARTESİ

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: ✔ ☹ ☺" />

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:
JavascriptJqueryHtmlCss

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Flash CS6 Video Tutorials for Beginners (Actionscript 3 Gaming)

    Flash CS6 Vi

    14 EYLÜL 2012
  • Peter Sharp

    Peter Sharp

    11 ŞUBAT 2013
  • TV nEW

    TV nEW

    25 AĞUSTOS 2012

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR