简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 我这个怎么获取光标的位置？
PHPz
PHPz 2017-04-11 12:18:43
0
2
241

现在正在做一个留言的功能，想实现qq聊天输入框那种可以插入图片的效果，textarea没法插入图片
所以我使用的是html5的contenteditable属性来做。但是现在关键是怎么能够获取光标位置来确定在那个位置中显示图片。可是用这种方法没法获取到index值，显示的undefined,但是在换成textarea就可以获取光标的位置，有什么解决的方法吗？

PHPz
PHPz

学习是最好的投资！

Antworte allen (2)
刘奇
刘奇2017-04-11 12:20:43 2 Etage

哈哈；当年写这个带表情的评论功能写到流泪的表示；必须得分享下经验了；

可以先来体验下：http://baijunyao.com/article/58

/** * 在textarea光标后插入内容 * @param string str 需要插入的内容 */ function insertHtmlAtCaret(str) { var sel, range; if(window.getSelection){ sel = window.getSelection(); if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement("p"); el.innerHTML = str; 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(str); } }

评论用到的js；
http://git.oschina.net/shuaib...

有源码可以整个下载下来慢慢研究：http://git.oschina.net/shuaib...

Wie+0
Antwort hinzufügen
    大家讲道理
    大家讲道理2017-04-11 12:20:43 1 Etage

    做了一个DEMO， 你看看怎么样

    Wie+0
    Antwort hinzufügen
      Beliebte Themen
      Mehr>
      Populäre Artikel
      Beliebte Tutorials
      Mehr>
      Verwandte Tutorials
      Beliebte Empfehlungen
      Aktuelle Kurse
      Neueste Downloads
      Mehr>
      Web-Effekte
      Quellcode der Website
      Website-Materialien
      Frontend-Vorlage
      Über uns Haftungsausschluss Sitemap
      Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！