百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> js实现评论插入表情图片在光标处插入字符
分享文章到:

js实现评论插入表情图片在光标处插入字符

发布时间:01/15 来源: 浏览: 关键词:
本文章来给大家介绍js实现评论插入表情图片在光标处插入字符方法,有需要了解的同学可进入参考参考。

添加到数据库的每条评论中的每个表情都是以特殊的字符表示的,比如"[face1]"代表一个笑脸的表情,"[face2]"代表伤心的表情。只是,当这条评论在显示之前,对评论中的所有表情的特殊字符用对应的图片替换就行了

 代码如下


<?php
    /**
    *评论添加表情--在光标处插入表情字符(www.111cn.net)
    */
    $content = isset($_POST["content"]) ? $_POST["content"]: '';
    if(!empty($content))
    {
        for($i = 1; $i <= 13; $i++)
        {
            $content = str_replace('[face' .$i. ']','<img src="IMAGES/' . $i . '.GIF"/>',$content);     //将特殊字符替换为图片显示(也可用正则替换,不过据说正则效率不高)
        }
        echo '您输入的内容是:' . $content . '<br/>';
    }
 
?>
<script type="text/javascript">
//在光标处插入图片字符JS
function addExpression(myField, myValue)
{
    myField = document.getElementById(myField);
    //IE
    if (document.selection)
    {
        myField.focus();
        sel = document.selection.createRange();
        myValue = "[face"+myValue+"]";
        sel.text = myValue;
        sel.select();
    }
    //MOZILLA
    else if (myField.selectionStart || myField.selectionStart == '0')
    {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        // save scrollTop before insert
        var restoreTop = myField.scrollTop;
        myValue = "[face"+myValue+"]";
        myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos,myField.value.length);
        if (restoreTop > 0)
        {
            // restore previous scrollTop
            myField.scrollTop = restoreTop;
        }
        myField.focus();
        myField.selectionStart = startPos + myValue.length;
        myField.selectionEnd = startPos + myValue.length;
    }
    else
    {
        myField.value += myValue;
        myField.focus();
    }
}
 
</script>
 
<br/><p/>
<img src="IMAGES/1.GIF" style="cursor:pointer" onclick="addExpression('content','1')"/>
<img src="IMAGES/2.GIF" style="cursor:pointer" onclick="addExpression('content','2')"/>
<img src="IMAGES/3.GIF" style="cursor:pointer" onclick="addExpression('content','3')"/>
<img src="IMAGES/4.GIF" style="cursor:pointer" onclick="addExpression('content','4')"/>
<img src="IMAGES/5.GIF" style="cursor:pointer" onclick="addExpression('content','5')"/>
<img src="IMAGES/6.GIF" style="cursor:pointer" onclick="addExpression('content','6')"/>
<img src="IMAGES/7.GIF" style="cursor:pointer" onclick="addExpression('content','7')"/>
<img src="IMAGES/8.GIF" style="cursor:pointer" onclick="addExpression('content','8')"/>
<img src="IMAGES/9.GIF" style="cursor:pointer" onclick="addExpression('content','9')"/>
<img src="IMAGES/10.GIF" style="cursor:pointer" onclick="addExpression('content','10')"/>
<img src="IMAGES/11.GIF" style="cursor:pointer" onclick="addExpression('content','11')"/>
<img src="IMAGES/12.GIF" style="cursor:pointer" onclick="addExpression('content','12')"/>
<img src="IMAGES/13.GIF" style="cursor:pointer" onclick="addExpression('content','13')"/>
<br/>
<form action="" method="post">
<textarea name="content" id="content"></textarea>
<input type="submit" value=" 提 交 "/>
</form>

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有4人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板