<!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. SQL触发器、事物

    触发器: 触发器为特殊类型的存储过程,可在执行语言事件时自动生效.SQL Server 包括三种常规类型的触发器:DML 触发器.DDL 触发器和登录触发器. 当服务器或数据库中发生数据定义语言 (D ...

  2. java 23 - 2 设计模式之单例模式

    单例模式:保证类在内存中只有一个对象. 如何保证类在内存中只有一个对象呢?  A:把构造方法私有  B:在成员位置自己创建一个对象  C:通过一个公共的方法提供访问 单例模式之饿汉式: (一进来就造对 ...

  3. noip模拟赛（一）魔法树

    魔法树 (mahou.pas/c/cpp) [问题描述] 魔法使moreD在研究一棵魔法树. 魔法树顾名思义,这货是一棵树,奇葩的是魔法树上的每一条边都拥有一个魔法属性,如果不那么奇葩就不是moreD ...

  4. IOS第四课——Autolayout_View

    这节课,我们要学习MVC.Selector.Access Control.Extension.Auto Layout.Delegate-Protocol.Custom View. Auto Layou ...

  5. jQuery学习之jQuery Ajax用法详解

    jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...

  6. HTML 学习笔记 JavaScript (变量)

    变量是储存信息的容器. 实例 var x=2; var y=3; var z=x+y; 就像代数那样 x=2 y=3 z=x+y 在代数中,我们使用字母(比如 x)来保存值(比如 2).通过上面的表达 ...

  7. Broadmann分区

    来源: http://blog.sina.com.cn/s/blog_60a751620100k2hj.html Brodmann areas Name 中文名 Function 1 Somatose ...

  8. Javascript中document.execCommand()的用法

    document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令 ...

  9. java多线程系类：JUC原子类：02之AtomicLog原子类

    概要 AtomicInteger, AtomicLong和AtomicBoolean这3个基本类型的原子类的原理和用法相似.本章以AtomicLong对基本类型的原子类进行介绍.内容包括:Atomic ...

  10. Linux 网络编程详解十二

    UDP的特点 --无连接 --基于消息的数据传输服务 --不可靠 --UDP更加高效 UDP注意点 --UDP报文可能会丢失,重复 --UDP报文可能会乱序 --UDP缺乏流量控制(UDP缓冲区写满之 ...