点击到输入框代码(类似表情插入)

	composer @Ta
	2020-02-13 20:31

---

  <!--表情点击输入-->
  <script src="/zl/control/js/jquery-3.1.1.min.js"></script>
<script>
function insertText(obj, str) {  
    if (document.selection) {  
        var sel = document.selection.createRange();  
        sel.text = str;  
    } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {  
        var startPos = obj.selectionStart,  
            endPos = obj.selectionEnd,  
            cursorPos = startPos,  
            tmpStr = obj.value;  
        obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);  
        cursorPos += str.length;  
        obj.selectionStart = obj.selectionEnd = cursorPos;  
    } else {  
        obj.value += str;  
    }  
}
$(document).ready(function () {
  $("#content").after('<p id="face"><img title="tb:冷" src="/img/tb/冷.png" style="width:30px;height:30px;"/><img title="tb:不高兴" src="/img/tb/不高兴.png" style="width:30px;height:30px;"/><img title="tb:乖" src="/img/tb/乖.png" style="width:30px;height:30px;"/><img title="tb:勉强" src="/img/tb/勉强.png" style="width:30px;height:30px;"/><img title="tb:吐舌" src="/img/tb/吐舌.png" style="width:30px;height:30px;"/><img title="tb:吐" src="/img/tb/吐.png" style="width:30px;height:30px;"/><img title="tb:呵呵" src="/img/tb/呵呵.png" style="width:30px;height:30px;"/><img title="tb:呼" src="/img/tb/呼.png" style="width:30px;height:30px;"/><img title="tb:咦" src="/img/tb/咦.png" style="width:30px;height:30px;"/><img title="tb:哈哈" src="/img/tb/哈哈.png" style="width:30px;height:30px;"/><img title="tb:啊" src="/img/tb/啊.png" style="width:30px;height:30px;"/><img title="tb:喷" src="/img/tb/喷.png" style="width:30px;height:30px;"/><img title="tb:太开心" src="/img/tb/太开心.png" style="width:30px;height:30px;"/><img title="tb:委屈" src="/img/tb/委屈.png" style="width:30px;height:30px;"/><img title="tb:开心" src="/img/tb/开心.png" style="width:30px;height:30px;"/><img title="tb:怒" src="/img/tb/怒.png" style="width:30px;height:30px;"/><img title="tb:惊哭" src="/img/tb/惊哭.png" style="width:30px;height:30px;"/><img title="tb:惊讶" src="/img/tb/惊讶.png" style="width:30px;height:30px;"/><img title="tb:汗" src="/img/tb/汗.png" style="width:30px;height:30px;"/><img title="tb:泪" src="/img/tb/泪.png" style="width:30px;height:30px;"/><img title="tb:滑稽" src="/img/tb/滑稽.png" style="width:30px;height:30px;"/><img title="tb:狂汗" src="/img/tb/狂汗.png" style="width:30px;height:30px;"/><img title="tb:疑问" src="/img/tb/疑问.png" style="width:30px;height:30px;"/><img title="tb:真棒" src="/img/tb/真棒.png" style="width:30px;height:30px;"/><img title="tb:睡觉" src="/img/tb/睡觉.png" style="width:30px;height:30px;"/><img title="tb:笑眼" src="/img/tb/笑眼.png" style="width:30px;height:30px;"/><img title="tb:花心" src="/img/tb/花心.png" style="width:30px;height:30px;"/><img title="tb:鄙视" src="/img/tb/鄙视.png" style="width:30px;height:30px;"/><img title="tb:酷" src="/img/tb/酷.png" style="width:30px;height:30px;"/><img title="tb:钱" src="/img/tb/钱.png" style="width:30px;height:30px;"/><img title="tb:阴险" src="/img/tb/阴险.png" style="width:30px;height:30px;"/><img title="tb:黑线" src="/img/tb/黑线.png" style="width:30px;height:30px;"/><img title="tb:大怒" src="/img/tb/大怒.png" style="width:30px;height:30px;"/><img title="tb:礼物" src="/img/tb/礼物.png" style="width:30px;height:30px;"/><img title="tb:玫瑰花" src="/img/tb/玫瑰花.png" style="width:30px;height:30px;"/></p>');
  $('#face img').click(function () {
    var face = "{" +  $(this).attr("title") + "}";
    insertText(document.getElementById("content"), face);
  });
});
</script>
  <!--表情点击输入-->

输入框：

<textarea id="content" name="text" class="form-control" style="height:150px;">请输入内容</textarea>
<input type="submit" value="发表" class="form-control">

来源：


最后编辑:2020-02-13 20:34

阅:2205

发表于2020-02-13 20:31

#php源码

<script>
$(document).ready(function () {
  $("#content").after('<p id="ubb"><span id="ubbb" title="[ceshi]">测试</span></p>');
  $('#ubb #ubbb').click(function () {
    var ubb = "" +  $(this).attr("title") + "";
    insertText(document.getElementById("content"), ubb);
  });
});
</script>