<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>contenteditable</title>

<style>

*{

 margin:0;padding:0;

}

.im-message-area{

 width:98%;

 padding:2px;

 height:75px;

 border:#000 solid 1px;

 background:#fff;

 font:12px/20px arial,"5b8b4f53";

 word-wrap:break-word;

 overflow-y:auto;

 line-height:1;

}

.ul{display:none;}

.ul li{

 background-color:#CCC;

 width:50px;

}

</style>

<script language="javascript" type="text/javascript">

function inimage(text){

 var obj= $(".im-message-area")[0];

 var range, node;

 if(!obj.hasfocus) {

  obj.focus();

 }

    if (window.getSelection && window.getSelection().getRangeAt) {

        range = window.getSelection().getRangeAt(0);

  range.collapse(false);

        node = range.createContextualFragment(text);

  var c = node.lastChild;

        range.insertNode(node);

  if(c){

   range.setEndAfter(c);

   range.setStartAfter(c)

  }

  var j = window.getSelection();

  j.removeAllRanges();

  j.addRange(range);

    } else if (document.selection && document.selection.createRange) {

        document.selection.createRange().pasteHTML(text);

    }

}

$(document).ready(function(){

 $('#button').click(function(){

  $('.ul').show();

 })

 $('.ul li').each(function(){

  $(this).click(function(){

   inimage($(this).text());

  }) 

 })

});

</script>

</head>

<body>

 <div contenteditable="true" id="im_message_area" class="im-message-area"><br></div>

 <a href="javascript:void(0)" id="button">按钮</a>

 <ul class="ul">

  <li>(笑)</li>

  <li>(哭)</li>

  <li>(乐)</li>

 </ul>

</body>

</html>

jquery-焦点定位追加内容的更多相关文章

  1. js-处理div设置的编辑框处理焦点定位追加内容

    具体实现方法如下: 首先要让DIV启用编辑模式 <div contenteditable=true id="divTest"></div> 通过设定cont ...

  2. jquery 元素控制(追加元素/追加内容)

    参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...

  3. jquery 元素控制(追加元素/追加内容)介绍及应用

    http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素  ...

  4. jQuery实现页面导航内容定位效果，并支持内容切换

    需求 页面向下滚动时,需要将顶部的搜索栏信息和导航菜单吸顶,并且,搜索栏信息和导航菜单之间可以切换. 效果 https://www.iguopin.com/index.php?m=&c=ind ...

  5. 强大的自适应jQuery焦点图特效

    jQuery焦点图切换自适应效果 自适应jQuery焦点图特效是一款支持移动端的响应式jQuery焦点图插件,支持flexible布局,支持移动触摸事件等. 今天我们要来分享一款很灵活的jQuery焦 ...

  6. jQuery中的常用内容总结(二)

    jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...

  7. 超酷实用的jQuery焦点图赏析及源码

    焦点图应用在现代网页中使用十分广泛,有注重简单小巧的,也有注重华丽美观的,大部分jQuery焦点图都可以滑动和切换图片,并且在切换图片时产生不同的动画特效.今天我们要分享一些超酷而且实用的jQuery ...

  8. 分享8个常用的jQuery焦点图插件

    现在web网页jquery应用越来越广泛,目前几乎每一个WEB项目都在使用jQuery,因为jQuery插件实在太丰富,尤其是一些图片滑块插件和jQuery焦点图插件,更是多如牛毛,很多初学者只需稍微 ...

  9. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

随机推荐

  1. MySQL注射的过滤绕过技巧[1]

    SQL注射的绕过技巧较多,此文仅做一些简单的总结. 前文已经提到,最好利用的注射点: 支持Union 可报错 支持多行执行.可执行系统命令.可HTTP Request等额外有利条件 若非以上类型,则可 ...

  2. wk_04

    函数 函数是对程序逻辑进行结构化或过程化的一直编程方法.能将整块代码巧妙的隔离成易于管理的小块,把重复代码放到函数中而不是进行大量的拷贝--这样既能节省空间,也有助于保持一致性,因为你只需要改变单个的 ...

  3. Frequently Asked Questions - P-thresholds

    Source: http://mindhive.mit.edu/book/export/html 1. What is the multiple-comparison problem? What is ...

  4. Javascript Math.ceil()与Math.round()与Math.floor()区别

    Math.ceil()向上舍入 1 2 3 alert(Math.ceil(20.1)) //输出 21 alert(Math.ceil(20.5)) //输出 21 alert(Math.ceil( ...

  5. CodeDom

    细说CodeDom 在上一篇文章中,老周厚着脸皮给大伙介绍了代码文档的基本结构,以及一些代码对象与CodeDom类型的对应关系. 在评论中老周看到有朋友提到了 Emit,那老周就顺便提一下.严格上说, ...

  6. Linux shell的输入输出

    echo --echo命令可以显示文本行或变量,或者把字符串输入到文件 --echo [option] string -e 解析转义字符 例如:echo -e "nimenhao\nasfd ...

  7. 打印机设置(PrintDialog)、页面设置(PageSetupDialog) 及 RDLC报表如何选择指定打印机

    如果一台电脑同时连接多个打印机,而且每个打印机使用的纸张大小各不相同(比如:票据打印钱用的小票专用张,办公打印机用的是A4标准纸),在处理打印类的需求时,如果不用代码干预,用户必须每次打印时,都必须在 ...

  8. C#基础之泛型

    1.泛型的本质 泛型的好处不用多说,在.NET中我看到有很多技术都是以泛型为基础的,不过因为不懂泛型而只能对那些技术一脸茫然.泛型主要用于集合类,最主要的原因是它不需要装箱拆箱且类型安全,比如很常用的 ...

  9. SQLServer(MSSQL)、MySQL、SQLite、Access相互迁移转换工具 DB2DB v1.0

    最近公司有一个项目,需要把原来的系统从 MSSQL 升迁到阿里云RDS(MySQL)上面.为便于测试,所以需要把原来系统的所有数据表以及测试数据转换到 MySQL 上面.在百度上找了很多方法,有通过微 ...

  10. [MCSM]随机搜索和EM算法

    1. 概述 本节将介绍两类问题的不同解决方案.其一是通过随机的搜索算法对某一函数的取值进行比较,求取最大/最小值的过程:其二则和积分类似,是使得某一函数被最优化,这一部分内容的代表算法是EM算法.(书 ...