jQuery append()在textarea标签的替代方法

在jquery官方的说明里append()是用于在被选元素的结尾插入内容,而最开始我想实现一个在文本框里追加表情的功能,理所当然的想到这个方法,就是获取标签代码,然后添加到输入的文字之后。然后问题就出现了,append()只能在文本框为空,且没有修改过的情况下才可以正常运行,否则是怎么点击都没有反应,控制台也不会出现报错。
搜索了很久,才找到可以替代的方法,其实就是利用val(),决定记录下来。

原本的代码如下:

$("body").on("click",".emoji-box img",function () {
    var emoji = $(this).attr("data-emoji");
    $("#chat-text").append("[!"+emoji+"!]");
});

我的想法很简单,给表情图片设置data-emoji属性,然后通过append方法,输入[!图片代码!]的格式,结果理所当然是不行的。

修改后的代码如下

$("body").on("click",".emoji-box img",function () {
    var emoji = $(this).attr("data-emoji");  //通过自定义属性获取表情代码
    var str = $("#chat-text").val();  //读取当前文本框里面的值
    if (str == undefined){  //如果文本框值为undefined,则输入为空
        str="";
    }
    var text = str + "[!"+emoji+"!]";  //在文本框的值后加上表情的代码格式
    $("#chat-text").val(text);  //最后再直接输入到文本框,覆盖原本的值
});

总的来说,其实还算简单
1.png

发表评论
加载中...

相关文章

最新评论