Vloženie emotikonu do contenteditable – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Vloženie emotikonu do contenteditable – JavaScript, AJAX, jQuery – Fórum – Programujte.comVloženie emotikonu do contenteditable – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

Spuštěný nový filmový web Filmožrouti.cz — vše o Avengers, Pacific Rim, Thor, Star Wars…
JohnyP
~ Anonymní uživatel
2 příspěvky
22. 3. 2018   #1
-
0
-

Nazdárek. Vytvoril som si script na vkladanie emotikonov do textu s použitím contenteditable div. Problém je, že ak vložím emotikona na koniec textu, tak kurzor preskočí na koniec bloku (div-u). Viď obrázok:

Samotný kód vyzerá následovne:

<script>
function pasteHtmlAtCaret(emo) {
var html="<img src='./images/emojis/"+emo+"' style='width: 1em ; height: 1em; display: inline'>";
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}
</script>

<div class='box_wt row' style='width: 500px; display: inline-block; float: left; margin: 30px; padding: 5px;'>
<div id='test' contenteditable='true' class='media'>
    Here is some nice text
</div>
</div>

Viete mi niekto poradiť v čom by mohol byť problém?

Nahlásit jako SPAM
IP: 46.243.71.–
peter
~ Anonymní uživatel
3414 příspěvků
23. 3. 2018   #2
-
0
-

Zkus pouzit span / font-size/line-height, padding, background.
A kdyz po smajlikovi pises dal, tak, kam dava pismenka?

Nahlásit jako SPAM
IP: 2001:718:2601:258:4dbc:38...–
JohnyP
~ Anonymní uživatel
2 příspěvky
23. 3. 2018   #3
-
0
-

#2 peter
Keď začnem písať tak písmenka pokračujú normálne hneď za smajlíkom. Span som skúšal, ale výsledok bol rovnaký.

Nahlásit jako SPAM
IP: 94.136.149.–
peter
~ Anonymní uživatel
3414 příspěvků
23. 3. 2018   #4
-
0
-

u jedne aplikace potrebuji delat focus po prekresleni tabulky do vyhledavaciho inputu a resim to takto. treba by slo nec podobne najit i pro editable 

			el.focus();
			el.value = el.value;
			el.selectionStart = el.selectionEnd = el.value.length; // aby dal kurzor na konec
Nahlásit jako SPAM
IP: 2001:718:2601:258:b8a5:d4...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 10 hostů

Podobná vlákna

VS vloženie DLL — založil FFilip13

Vloženie MP3 (Audio) — založil zonda

Vloženie súboru do EXE — založil Benecore

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý