<!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. java中使用二重循环打印图形

    如图所示:打印沙漏图形 1:因为外层循环控制图形行数,所以首先判断这四个选项能否循环五次 2:以上四个循环的表达式都能循环五次,我们从内层循环入手. A:int i=0;i<5;i++ 当i=1 ...

  2. [No000053]我25岁了，是应该继续挣钱，还是选择自己的爱好？--正好庆祝自己25岁生日

    你所问的问题正是问题所在.停止做出重大决策,专注于缩小你想到达的地位与你之间的差距. 成功的生活并非由简单而鲜明的决定组成,它们更像这幅图: 但悲伤的是,太多人的状态类似于这幅图: 我知道这听上去很显 ...

  3. ip的划分,超详细

    from:http://blog.liuts.com/post/128/ IP和子网掩码我们都知道,IP是由四段数字组成,在此,我们先来了解一下3类常用的IP A类IP段 0.0.0.0 到127.2 ...

  4. curl命令

    定位后端接口是否ok,经常使用到curl -b/cookie  <name=string/file> cookie字符串或文件读取位置 curl http://localhost --co ...

  5. JS中将JSON的字符串解析成JSON数据格式《转》

    在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 使用eval函数来解析,并且使用jquery的ea ...

  6. oracle编程总结

    1,SEQUENCE的使用 问题:在MSSQL中,我们可以通过设置自增长来作为主键,但是oracle里面没有这个 解决方案:使用SEQUENCE来实现,具体步骤如下 (1)首先建立一个序列(就是每次查 ...

  7. Broadmann area (wiki)

    Source: https://en.wikipedia.org/wiki/Brodmann_area Lateral surface Medial serface Areas 3, 1 & ...

  8. Java Web开发Tomcat中三种部署项目的方法

    第一种方法:在tomcat中的conf目录中,在server.xml中的,<host/>节点中添加: <Context path="/hello" docBase ...

  9. WEBAPI 怎么保证安全

    先记录下   客户端登陆,服务端验证然后生成session,客户端每次调用接口的时候都把session带过去.服务端路由请求的时候都去验证session. 另外一种app的做法是,参数+用户名密码做s ...

  10. 实现路由的RouterMiddleware中间件

    实现路由的RouterMiddleware中间件 虽然ASP.NET Core应用的路由是通过RouterMiddleware这个中间件来完成的,但是具体的路由解析功能都落在指定的Router对象上, ...