`

分享原创文本框插入表情Jquery插件

阅读更多

文本框插入表情Jquery插件是一款非常实用的功能,应用场景很广,基本上很多网站的留言和评论模块都用到,为了方便大家使用,网友水墨寒将此功能封装成一个通用的插件。代码里面的每一个功能都写上了很详细的注释,分成了3个主要功能,除了插件本身还有一个光标定位插件和表情解析插件。 

  

页面代码使用如下: 

 <script type="text/javascript">  
 $(function (){  
     $("a.face").smohanfacebox({  
        Event : "click",    //触发事件    
         divid : "Smohan_FaceBox", //外层DIV ID  
         textid : "Smohan_text" //文本框 ID  
     });  
     //解析表情  $('#Zones').replaceface($('#Zones').html());  
 });  
 //Demo测试  
 $('#Smohan_Showface').click(function() {  
      $('#Zones').fadeIn(360);  
      $('#Zones').html($('#Smohan_text').val());  
      $('#Zones').replaceface($('#Zones').html());//替换表情  
     });  
 </script> 
  

效果如下: 


在线演示和下载:http://www.jq-school.com/Detail.aspx?id=153

分享到:
评论

相关推荐

    文本框插入表情Jquery插件

    文本框插入类似QQ,微博表情的Jquery插件

    Jquery文本框插入表情插件.zip

    《jQuery文本框插入表情插件详解》 在Web开发中,增强用户交互体验是至关重要的。其中,允许用户在文本框内插入表情符号已经成为一种流行趋势,尤其在社交媒体和聊天应用中。今天我们将深入探讨一个基于jQuery的...

    jQuery文本框解析渲染表情插件特效源码.zip

    《jQuery文本框解析渲染表情插件特效源码详解》 在网页开发中,与用户交互是至关重要的一环,而文本输入区域是用户表达观点、反馈信息的重要途径。为了提升用户体验,许多开发者会在文本框中集成表情功能,让用户...

    Jquery文本框插入表情插件特效代码

    **jQuery文本框插入表情插件特效代码详解** 在网页交互设计中,为了增强用户体验,许多网站和应用都引入了在文本输入框内插入表情的功能。`jQuery`作为一款广泛使用的JavaScript库,为开发者提供了丰富的功能扩展,...

    新浪微博表情jQuery插件(jquery.sinaEmotion-1.0)

    《新浪微博表情jQuery插件——jquery.sinaEmotion-1.0详解》 在网页开发中,为了提升用户体验,经常会引入各种各样的JavaScript插件。其中,“新浪微博表情jQuery插件”(jquery.sinaEmotion-1.0)是一个专门用于...

    jQuery文本框输入表情符号代码.zip

    开发者可以通过解析表情列表,结合JavaScript事件处理和DOM操作,创建一个互动的表情面板,让用户在文本框中方便地插入表情,提升用户体验。同时,借助成熟的jQuery插件,可以快速地在项目中集成这一特性,降低开发...

    jQuery插件 文本框、文本域 光标处插入代码

    本主题聚焦于一个特定的jQuery插件,该插件允许开发者在文本框(`&lt;input type="text"&gt;`)和文本域(`&lt;textarea&gt;`)中于光标位置插入代码或内容。这对于编辑器、代码编辑器或任何需要动态插入文本的场景来说是非常...

    漂亮的评论文本框表情选择插件

    "漂亮的评论文本框表情选择插件"正是一款旨在提升用户交互体验的工具,它为用户提供了一种简单而直观的方式来表达情感和观点,使评论区更加生动有趣。 这款插件的核心功能在于提供丰富的表情选择,让用户在评论时能...

    jquery文本框自动补全ajax autocomplete 完整实例

    在本文中,我们将深入探讨如何使用jQuery实现一个基于Ajax的文本框自动补全功能,以及相关的`autocomplete`插件的完整实例。这个功能在许多Web应用程序中非常常见,它能够提高用户输入的效率和用户体验。 首先,让...

    仿QQ表情的jquery插件

    本项目名为“仿QQ表情的jquery插件”,其主要目的是为网页应用提供与QQ聊天软件类似的表情功能,使得用户在网页上能够方便地选择和插入各种表情,增强互动体验。 首先,我们要理解jQuery插件的基本结构。一个jQuery...

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

    最后,`js`目录可能包含jQuery插件或者自定义的JavaScript代码。这个脚本主要负责监听按钮点击事件,弹出表情选择框,并在用户选择表情后将其插入到评论输入框中。以下是可能的实现: ```javascript $(document)....

    新浪微博表情jQuery插件

    即便成功读取到表情数据了,又必须考虑表情分类,翻页等等等等问题,还需要考虑表情的插入方式并非简单的在文本最后插入,而是在光标所在处插入,还应该能够替换掉已选中文字,还要涉及到不同浏览器的兼容问题…… ...

    JQuery新浪1630个表情插件.zip

    3. 初始化插件:在文档加载完成后,通过JQuery选择器找到需要添加表情功能的元素(如文本框或富文本编辑器),然后调用插件方法进行初始化。 4. 实现表情面板:创建一个浮动的面板,显示表情分类和预览图,用户可以...

    jQuery QQ表情插件jquery.qqFace.js

    用户在文本框或者编辑器中输入时,可以方便地插入这些表情,增强文字表达的情感色彩。 2. 主要特性 - 表情面板:包含多种QQ风格的表情图标,满足多样化的情感表达需求。 - 用户友好:点击或拖拽表情即可插入,...

    jQuery QQ表情插件qqFace.zip

    qqFace的核心功能是通过调用jQuery的事件处理和DOM操作,实现表情面板的显示与隐藏,以及选中表情后将其插入到指定文本框。它通常通过一个按钮或者图标触发,当用户点击这个按钮时,会弹出一个包含多种QQ表情的面板...

    jquery表单文本框添加文字标签.zip

    5. **标签的拖动与排序**:为了让用户可以调整标签的顺序,我们可以利用jQuery UI库中的`draggable`和`droppable`插件。首先,使每个标签元素可拖动,然后设置一个接收拖放的容器。例如: ```javascript $('.tag')...

    好用的jquery+php的评论表情插件

    4. **前端渲染**:使用jQuery将解析后的表情数据动态插入到页面上,可能通过模板引擎或直接DOM操作。 5. **用户输入处理**:当用户输入表情代码时,需要实时转换并预览,这可能涉及到监听文本框的输入事件和实时...

    jQuery文本框字符限制插件-TextArea Counter.pdf

    《jQuery文本框字符限制插件详解》 在网页设计中,常常需要对用户输入的文本进行长度限制,以保持页面的整洁和数据的一致性。jQuery作为一种强大的JavaScript库,提供了丰富的功能来帮助开发者实现这样的需求。本文...

Global site tag (gtag.js) - Google Analytics