网站地图    收藏   

主页 > 前端 > javascript >

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

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 本文章来给大家介绍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>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论