javascript控制在光标位置插入文字适合表情的插入

直接上代码吧，用js控制在光标位置插入。

在实现表情的插入时用到了。


代码如下:

<span style="font-size:18px;"><html>
<head>
<script type='text/javascript'>
function test(str){
var tc = document.getElementById("mytextarea");
var tclen = tc.value.length;
tc.focus();
if(typeof document.selection != "undefined")
{
document.selection.createRange().text = str;
}
else
{
tc.value = tc.value.substr(0,tc.selectionStart)+str+tc.value.substring(tc.selectionStart,tclen);
}
}
</script>
</head>
<body>
<textarea rows=5 name=s1 cols=27 id="mytextarea">目的通过点击页面上的按钮button 在textarea中的光标停留处插上文字 </textarea>
<input type=button onclick="test('这是需要加入的文字')" />
</body>
</html>
</span>

赞 (0)

相关推荐

  • discuz中用到的javascript函数解析 原创第1/2页

    var lang = new Array(); var userAgent = navigator.userAgent.toLowerCase(); var is_opera = userAgent.indexOf('opera') != -1 && opera.version(); var is_moz = (navigator.product == 'Gecko') && userAgent.substr(userAgent.indexOf('firefox') + 8

  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D

  • JavaScript 浏览器验证代码(来自discuz)

    在看 Discuz! 的源码的时候,发现了一段浏览器验证的代码,还是比较经典的: 复制代码 代码如下: var BROWSER = {}; var USERAGENT = navigator.userAgent.toLowerCase(); alert(USERAGENT); BROWSER.ie = window.ActiveXObject && USERAGENT.indexOf('msie') != -1 && USERAGENT.substr(USERAGENT.i

  • discuz表情的JS提取方法分析

    discuz表情的JS提取方法分析

    本文实例讲述了discuz表情的JS提取方法.分享给大家供大家参考,具体如下: discuz将应用的表情生成了一个js文件,在forumdata/cache/下,叫smilies_var.js,这个文件是根据后台数据库 生成的一个表情数组,里面有两个数组,一个是表情名称和所在目录的数组smilies_type,一个是表情图片名和代码的数组 smilies_array,这些都是更新缓存的时候自己读数据库生成的,所以后台的改动一样会改动到它. 论坛快速回复的表情是一个弹出层,虽然已经很不错,但仍然会

  • 海河写的 Discuz论坛帖子调用js的php代码

    调用代码 <script language="javascript" src="js_bbs.php?fid=1"></script> js_bbs.php(放在根目录下) 内容 <?php require ("bbs/config.inc.php"); //连接,选择数据库  $link = mysql_connect( $dbhost,$dbuser,$dbpw) or die('Could not connec

  • JavaScript从0开始构思表情插件

    JavaScript从0开始构思表情插件

    前言: 由于公司开发项目需要用到表情插件,在网上百度了好久,很多表情插件,都是需要引用好多js文件,也没有现成的demo可以使用,还有一些插件是引用好多图片,每一个表情都要重新请求一下.为了这样一个功能,要引入好多js,img,也是得不偿失-- 所以,博主自己码了一个小巧的"表情插件",方便以后项目直接使用. 功能 功能:传递表情对应的字符格式到后台,后台返回字符串,前端将该字符串解析展示成相应的表情展示在页面上. 使用方法: 在option中配置需要的参数 var option =

  • Discuz! 5.0.0论坛程序中加入一段js代码，让会员点击下载附件前自动弹出提示窗口

    你需要修改attachment.php文件 在根目录下  在$attachexists = $ispaid = FALSE;下面添加  if (!empty($checktwo)) {  在最末尾的?>前添加  } else {  echo "<script>alert('写上你要提示的内容')</script>";  echo "<META HTTP-EQUIV=\"Refresh\" CONTENT=\"0

  • javascript Discuz代码中的msn聊天小功能

    javascript中添加以下2个函数 function msnoperate(action, msn) {    var actionArray = new Array();    actionArray = {    'add' : 'http://go.discuz.com/?app=msn&linkid=5&msn=' + msn,    'chat' : 'http://go.discuz.com/?app=msn&linkid=6&msn=' + msn    

  • java(jsp)整合discuz同步登录功能详解

    java(jsp)整合discuz同步登录功能详解

    最近做了一个资源库系统的项目,老师说可以搭建开源论坛替代自己开发社交模块,正好在开源中国上看到了一个利用discuz的UCenter功能实现同步登录的开源项目(https://code.google.com/p/discuz-ucenter-api-for-java/),不禁大喜,于是花了几个小时照着教程操作了一遍,居然很轻松的成功了,特写此文以做纪念.. Uenter是Comsenz旗下各个产品之间信息直接传递的一个桥梁,通过UCenter站长可以无缝整合Comsenz系列产品,实现用户的一站

  • javascript控制在光标位置插入文字适合表情的插入

    直接上代码吧,用js控制在光标位置插入. 在实现表情的插入时用到了. 复制代码 代码如下: <span style="font-size:18px;"><html> <head> <script type='text/javascript'> function test(str){ var tc = document.getElementById("mytextarea"); var tclen = tc.value.

  • JavaScript 获取/设置光标位置,兼容Input&&TextArea

    JavaScript 获取/设置光标位置,兼容Input&&TextArea. body { margin: 32px; font-family: Verdana, sans-serif; font-size: 13px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } .input { width: 50%; font-family: Verdana, sans-serif; font-size: 13px

  • jQuery设置聚焦并使光标位置在文字最后的实现方法

    如下所示: $.fn.setCursorPosition = function(position) { if (this.lengh == 0) return this; return $(this).setSelection(position, position); }; $.fn.setSelection = function(selectionStart, selectionEnd) { if (this.lengh == 0) return this; input = this[0];

  • JS在TextArea光标位置插入文字并实现移动光标到文字末尾

    =IE支持document.selection =Firefox,Chrome,Safari以及Opera都有selectionStart和selectionEnd属性 复制代码 代码如下: function insertText(obj,str) { if (document.selection) { var sel = document.selection.createRange(); sel.text = str; } else if (typeof obj.selectionStart

  • javascript获取以及设置光标位置

    一. 获取光标位置: // 获取光标位置 function getCursortPosition (textDom) { var cursorPos = 0; if (document.selection) { // IE Support textDom.focus (); var selectRange = document.selection.createRange(); selectRange.moveStart ('character', -textDom.value.length);

  • JS在可编辑的div中的光标位置插入内容的方法

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式 复制代码 代码如下: <div contenteditable=true id="divTest"></div> 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了. 不扯话题了.下面说怎么获取或设置光标位置. 2个步骤: ① 获取DIV中的光标位置

  • JavaScript中在光标处插入添加文本标签节点的详细方法

    正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点.但是这两个对象在IE和标准的DOM方式的运用方法是不同的. 思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区).然后,从Selection对象转成Range对象.目的是利用Range对象的方法插内容进去.最后,插入动作结束后将光标移到插入内容的后面. var sel = win.document.selection; //IE var sel = win.getSelection(

  • JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    本文实例讲述了JS实现iframe编辑器光标位置插入内容的方法.分享给大家供大家参考,具体如下: <html> <iframe id="x" name="x"></iframe> <input type="button" onclick="t()" value="test"> <input type="button" onclick=

  • 基于jQuery的输入框在光标位置插入内容, 并选中

    复制代码 代码如下: // //使用方法 //$(文本域选择器).insertContent("插入的内容"); //$(文本域选择器).insertContent("插入的内容",数值); //根据数值选中插入文本内容两边的边界, 数值: 0是表示插入文字全部选择,-1表示插入文字两边各少选中一个字符. // //在光标位置插入内容, 并选中 (function($) { $.fn.extend({ insertContent: function(myValue,

  • jquery实现在光标位置插入内容的方法

    本文实例讲述了jquery实现在光标位置插入内容的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>  <head>      <title>无标题页</title>      <script type="text/javascript" src="jquery-1.7.2.min.js"></script>     

随机推荐