`
guobinperfect
  • 浏览: 48400 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

给留言框添加表情js

阅读更多
<script type="text/javascript">
<!--
//函数 addtext
//用途 将参数s的内容作为字符串添加到评论框中。
function addtext(s){
//考虑到页面上只会有一个评论框存在,因此直接使用getElementsByTagName取得
//得到评论框对象后,将s添加到评论框内容的末尾。
document.getElementsByTagName("textarea")[0].value = document.getElementsByTagName("textarea")[0].value + s
}
//开始主程序
//判断是否在单篇日志的页面,判断方法是页面中是否有验证码
if(document.getElementById("authcode_td1")){
//判断成功
var i, j; //循环计数
//自定义参数之一:
//用于指定图标文件地址的url路径,到最后一层文件夹为止
//也就是说这个url后边就是****.gif的图标文件了。
//可自定义。
var urlBase = "http://booker.yculblog.com/images/smiley/1/";
//自定义参数之二:
//表情图片文件的文件名。紧接着上一参数,不包括点号和扩展名。
//注意:为了缩短代码长度,只考虑这些表情是来自同一地址的同一目录。
//可自定义。
var picName = new Array("1", "2", "3", "4", "5", "6", "7", "8", "10", "11", "19", "20");
//自定义参数之三:
//数组,用于保存图标对应的代码,可自定义。
var smileyCode = new Array("[:-)]", "[:-(]", "[XD]", "[;-)]", "[*^_^*]", "[:-O]", "[o_O]", "[T_T]", "[-_-b]", "[:-D]", "[#_#]", "[^.^]");
//自定义参数之四:
//这个最难,虽然说上边都很好自定义。但这个就有难度了。
//此参数为一个正则表达式数组。用于对应上边的表情代码。
//可自定义。
var smileyReg = new Array(/\[:-\)\]/g, /\[:-\(\]/g, /\[XD\]/g, /\[;-\)\]/g, /\[\*\^_\^\*\]/g, /\[:-O\]/g, /\[o_O\]/g, /\[T_T\]/g, /\[-_-b\]/g, /\[:-D\]/g, /\[#_#\]/g, /\[\^\.\^\]/g);

//定义表情图表列表
var s2 ="<br />";
//根据图标的数量,用循环将所有图表的html代码加在一起
for(i=0; i < picName.length; i++){
//其中有定义了鼠标指针为手,加入了点击事件。
//点击事件调用最初定义的函数addtext
s2 = s2 + "<img src='" + urlBase+picName[i] + ".gif' alt='' style='cursor:pointer;' onclick='addtext(\"" + smileyCode[i] + "\");' />";
}

//定位
//获得当前脚本以前的html代码中的所有的input对象
var inputs = document.getElementsByTagName("input");
var td;//用于保存“不公开”选框外边的td对象
for(i=0; i < inputs.length; i++){
//如果该input对象的name属性为"is_private"
//则就是我们要找的,取得其parentNode,也就是那个td对象
//中止循环
if(inputs[i].getAttribute("name") == "is_private"){
td = inputs[i].parentNode;
break;
}
}

//如果找到该td
if(td){
//取得该td外的tr对象
var tr = td.parentNode;
//将上边生成的表情图标列表添加到复选框的后边(有换行)
td.innerHTML= td.innerHTML + s2;
//将"不公开"三个字所在的表格设为纵向顶端对齐
tr.getElementsByTagName("td")[0].setAttribute("valign", "top");

//开始对已有评论中的表情代码进行替换
//由代码(如[:-)])到图片的html代码
//取得所有的blockquote,因此,也许存在误杀(正文中的blockquote)
var blocks = document.getElementsByTagName("blockquote");
//二重循环,搜索每个blockquote中的每种表情代码,如果有,就替换。
for(i=0; i < blocks.length; i++){
for(j=0; j < smileyReg.length; j++)
blocks[i].innerHTML = blocks[i].innerHTML.replace( smileyReg[j], "<img src='" + urlBase + picName[j] + ".gif' alt='' />" );
}
}
}
//-->
</script>
分享到:
评论
2 楼 wrean2013 2014-09-25  
           
1 楼 xzy10000 2011-11-24  
   

相关推荐

    javascript发表留言添加表情代码

    在JavaScript开发中,实现“发表留言添加表情代码”的功能是一项常见的需求,特别是在构建社交媒体或论坛类网站时。这个功能允许用户在发表评论或留言时,选择并插入预定义的表情符号,增强文字表达的情感色彩。本篇...

    asp留言板添加表情

    综上所述,构建一个ASP留言板并添加表情和头像功能涉及多个层面的技术,包括数据库设计、前后端交互、安全性控制等。通过合理的设计和实现,可以创建一个既实用又有趣的用户交流平台。在实际操作中,还需要结合具体...

    php留言板中的表情添加 表情添加 源代码

    通过以上的讲解和代码示例,你应该对如何在PHP留言板中添加表情有了基本的理解。在实际开发中,还需要结合前端技术,如JavaScript,来实现更丰富的交互效果,如动态输入检测和表情选择面板。同时,不断优化和更新...

    发表留言添加表情.rar

    【标题】"发表留言添加表情.rar" 涉及的核心知识点是JavaScript(JS)编程中的动态效果实现,特别是与用户交互相关的功能。在网页开发中,允许用户在发表留言时添加表情是一种常见的增强用户体验的方式,这通常涉及...

    asp.net发表留言添加表情

    在ASP.NET中,实现发表留言并添加表情的功能是一项常见的需求,尤其在社交网络、论坛或者博客等交互性强的Web应用中。这个功能可以提升用户体验,让用户在表达观点时更加生动和有趣。以下将详细介绍如何在ASP.NET...

    利用HTML、CSS 实现带表情的评论框的制作教程

    这个评论框的功能特点是表情能够动态加载,并且用户可以根据个人喜好自定义表情。整个实现过程涉及到前端技术的几个核心部分:HTML结构设计、CSS样式美化、以及JavaScript交互逻辑。 首先,我们需要了解HTML部分。...

    非常漂亮的带多种表情评论留言框.zip

    这个评论留言框不仅美观,而且功能丰富,允许用户通过各种表情表达情感,为网站添加了生动有趣的元素。 1. **JavaScript特效**: - JavaScript是一种轻量级的客户端脚本语言,用于动态更新网页内容,提高用户体验...

    jQuery多说QQ表情留言评论框代码.zip

    - 添加表情预览功能,用户在选择表情时可以预览效果。 - 异步加载更多评论,避免一次性加载过多数据导致页面加载慢。 - 提供表情快捷键,让用户更快速地插入常用表情。 - 实现表情搜索,帮助用户找到特定的表情。 ...

    js特效脚本含源码和说明发表留言添加表情

    js特效脚本含源码和说明发表留言添加表情本资源系百度网盘分享地址

    jQuery评论框插入表情图片代码.zip

    而为了增强用户体验,许多网站会在评论框中添加表情图片功能,让用户能够更直观地表达情感。这个"jQuery评论框插入表情图片代码.zip"压缩包提供了一种实现这一功能的方法,主要依赖于JavaScript库jQuery。接下来我们...

    留言表情的简单实现

    CSS可能用来美化这些元素的样式,而JavaScript则处理用户交互,例如点击表情图标添加到输入框,或者提交留言到服务器。 【标签】:“源码”、“工具” “源码”标签表明我们可以通过查看提供的代码来理解实现的...

    用javascript实现的留言板模块

    【标题】"用JavaScript实现的留言板模块"是一个利用JavaScript编程语言构建的互动功能,它允许用户在网站上发表留言,包含表情、图片以及各种文字处理功能。JavaScript是一种轻量级的解释型编程语言,常用于网页和...

    jQuery带表情仿多说留言评论框代码.zip

    【jQuery带表情仿多说留言评论框代码】是一款利用JavaScript库jQuery实现的具有新浪微博表情功能的仿多说评论框特效。这个代码集成了丰富的表情功能,使得用户在发表评论时可以像在微博平台上一样,方便地插入各种...

    为多说评论框增加滑稽阿鲁微博颜文字四套表情

    "为多说评论框增加滑稽阿鲁微博颜文字四套表情"这一项目,旨在提升多说评论系统的用户互动性,通过添加特定的表情包,使用户在评论交流时能更加生动有趣。 多说是一个流行的评论系统插件,它允许网站用户轻松地在...

    JS+JQuery+css3留言表情

    综上所述,"JS+JQuery+css3留言表情"是一个结合了JavaScript逻辑处理、jQuery简化操作和CSS3美化界面的典型应用场景。这三种技术的协同工作,使用户能够在留言时方便地插入和使用各种表情,极大地提升了互动体验。

    基于jQuery的网页版HTML带表情的评论框源码

    【基于jQuery的网页版HTML带表情的评论框源码】是一种常见的前端开发实践,它结合了HTML、jQuery、JavaScript和ECMAScript等技术,为用户提供了一个功能丰富的交互式评论功能,用户可以在评论输入框中添加各种表情,...

    js实现发表留言添加表情特效代码

    js实现发表留言添加表情特效代码

    纯js仿腾讯微博无刷新添加删除留言板功能插件

    服务器处理这些数据后,会返回一个确认信息,插件再通过JavaScript动态地将新留言添加到页面的留言列表中。这个过程对用户来说是无缝的,他们可以看到新的留言立即出现在页面上,而无需等待整个页面刷新。 删除留言...

    jQuery评论框插入QQ表情代码.zip

    《使用jQuery实现评论框插入QQ表情的代码解析》 在Web开发中,用户交互体验是至关重要的,而评论框作为用户表达观点、分享想法的重要工具,其功能的完善与便捷性直接影响到用户的满意度。其中,引入表情功能可以...

Global site tag (gtag.js) - Google Analytics