精华内容
下载资源
问答
  • 本文实例讲述了js实现可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:首先要让DIV启用编辑模式<div contenteditable=true id="divTest"></div>通过设定...

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:

    首先要让DIV启用编辑模式

    <div contenteditable=true id="divTest"></div>

    通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。
    不扯话题了。下面说怎么获取或设置光标位置.

    2个步骤:
    ① 获取DIV中的光标位置
    ② 改变光标位置

    var cursor = 0; // 光标位置  
    document.onselectionchange = function () {
    var range = document.selection.createRange();
    var srcele = range.parentElement();//获取到当前元素
    var copy = document.body.createTextRange();
    copy.moveToElementText(srcele);
    for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {
     copy.moveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量.
    }
    }

    给document绑定光标变化事件。用来记录光标位置.
    这样就可以拿到DIV的光标位置了.

    function moveEnd(obj) {
    lyTXT1.focus();
    var r = document.selection.createRange();
    //因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了
    r.moveStart('character', lyTXT1.innerText.length - cursor);
    r.collapse(true);
    r.select();
    }

    通过上面的我们就可以将DIV中的光标移动到最后面了
    一个完整的实例

    <button type="button" onclick="document.getElementById('test').focus(); insertHtmlAtCaret('<b>INSERTED</b>');">插入字符</button>
    <div contentEditable="true" style="height:50px; border:2px solid red;" id="test"> </div>
    
    function insertHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
    range = sel.getRangeAt(0);
    range.deleteContents();
    // Range.createContextualFragment() would be useful here but is
    // non-standard and not supported in all browsers (IE9, for one)
    var el = document.createElement("div");
    el.innerHTML = html;
    var frag = document.createDocumentFragment(), node, lastNode;
    while ( (node = el.firstChild) ) {
    lastNode = frag.appendChild(node);
    }
    range.insertNode(frag);
    // Preserve the selection
    if (lastNode) {
    range = range.cloneRange();
    range.setStartAfter(lastNode);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    }
    }
    } else if (document.selection && document.selection.type != "Control") {
    // IE < 9
    document.selection.createRange().pasteHTML(html);
    }
    }
    展开全文
  • position 属性指定了元素的定位类型。 position 属性的五个值: static:HTML元素的默认值,即没有定位,元素出现正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。 relative:...

    可以使用css的position属性的绝对定位。

    拓展知识

     

    position 属性指定了元素的定位类型。

    position 属性的五个值:

      • static:HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到 top, bottom, left, right影响。

      • relative:相对定位元素的定位是相对其正常位置。

      • fixed:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动:

      • absolute:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

      • sticky:ticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。position: sticky; 基于用户的滚动位置来定位。

    元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

    转载于:https://www.cnblogs.com/zzh20180601/p/10564563.html

    展开全文
  • 本文实例讲述了js实现可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下: 首先要让DIV启用编辑模式 代码如下:<div contenteditable=true id=”divTest”>...
  • <div><h1>Why underscore <p>(觉得这部分眼熟的可以直接跳到下一段了...) 最近开始看 underscore.js 源码,并将 <a href="https://github.com/hanzichi/underscore-analysis">underscore.js ...
  • 本文实例讲述了js实现可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:首先要让DIV启用编辑模式通过设定contenteditable=true开启div的编辑模式.这样DIV...

    本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考。具体实现方法如下:

    首先要让DIV启用编辑模式

    通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。

    不扯话题了。下面说怎么获取或设置光标位置.

    2个步骤:

    ① 获取DIV中的光标位置

    ② 改变光标位置

    var cursor = 0; // 光标位置

    document.onselectionchange = function () {

    var range = document.selection.createRange();

    var srcele = range.parentElement();//获取到当前元素

    var copy = document.body.createTextRange();

    copy.moveToElementText(srcele);

    for (cursor = 0; copy.compareEndPoints("StartToStart", range) < 0; cursor++) {

    copy.moveStart("character", 1);//改变光标位置,实际上我们是在记录cursor的数量.

    }

    }

    给document绑定光标变化事件。用来记录光标位置.

    这样就可以拿到DIV的光标位置了.

    function moveEnd(obj) {

    lyTXT1.focus();

    var r = document.selection.createRange();

    //因为这里死从当前光标开始移动的(好像文本框的是从0算起.)所以我们需要拿到当前光标位置,然后就可以计算出要移动多少位了,这样就可以把光标移动到想要的位置了

    r.moveStart('character', lyTXT1.innerText.length - cursor);

    r.collapse(true);

    r.select();

    }

    通过上面的我们就可以将DIV中的光标移动到最后面了

    一个完整的实例

    插入字符

    function insertHtmlAtCaret(html) {

    var sel, range;

    if (window.getSelection) {

    // IE9 and non-IE

    sel = window.getSelection();

    if (sel.getRangeAt && sel.rangeCount) {

    range = sel.getRangeAt(0);

    range.deleteContents();

    // Range.createContextualFragment() would be useful here but is

    // non-standard and not supported in all browsers (IE9, for one)

    var el = document.createElement("div");

    el.innerHTML = html;

    var frag = document.createDocumentFragment(), node, lastNode;

    while ( (node = el.firstChild) ) {

    lastNode = frag.appendChild(node);

    }

    range.insertNode(frag);

    // Preserve the selection

    if (lastNode) {

    range = range.cloneRange();

    range.setStartAfter(lastNode);

    range.collapse(true);

    sel.removeAllRanges();

    sel.addRange(range);

    }

    }

    } else if (document.selection && document.selection.type != "Control") {

    // IE < 9

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

    }

    }

    再看一个基于jquery的实例

    contenteditable

    按钮

    (笑)

    (哭)

    (乐)

    希望本文所述对大家的javascript程序设计有所帮助。

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!

    展开全文
  • 问题: 如何实现文本框根据是否获取光标改变背景颜色 文字类的标签如p标签,不能当块级元素吗? 行内元素与块类元素设置高度与宽度的差别 行内元素中能存放文本标签,...怎么让它不平铺 背景位置怎么设置?如果只指定

    问题:

    1. 如何实现文本框根据是否获取光标改变背景颜色
    2. 在文字类的标签如p标签,不能当块级元素吗?
    3. 行内元素与块类元素设置高度与宽度的差别
    4. 行内元素中能存放文本标签,其他行内标签,div标签吗?
    5. 行内块元素的特点
    6. 将行级元素转化为块级元素的操作,与场景
    7. 将块级元素转化为行内元素的操作与场景
    8. 将行级元素或者块级元素转化为 行内块级
    9. 让块内元素文字居中的操作和原理
    10. 块级元素中引入背景图片时,url链接要加引号吗?引入的图片出现在块级元素中那个位置
    11. 背景平铺 是默认的吗?怎么让它不平铺
    12. 背景位置怎么设置?如果只指定了一个,那另一个默认值是什么?
    13. 超大背景图片设置
    14. 背景固定操作,应用场景
    15. 背景简写的方法
    16. 背景透明度的写法

    回答:

    1. 如何实现文本框根据是否获取光标改变背景颜色
      a) :focus
    2. 在文字类的标签如p标签,不能当块级元素吗?
      a) 不能,
    3. 行内元素与块类元素设置高度与宽度的差别
      a) 行内元素是不能设置高度的,块类元素是可以的
    4. 行内元素中能存放文本标签,其他行内标签,div标签吗?
      a) 是可以的
    5. 行内块元素的特点
      a) 既可以在一行中存储多个标签元素,又可以设置标签元素的的高与宽
    6. 将行级元素转化为块级元素的操作
      a) display:block
    7. 将块级元素转化为行内元素的操作
      a) display:inline
    8. 将行级元素或者块级元素转化为 行内块级
      a) display: inline-block;
    9. 让块内元素文字居中的操作和原理
      a) text-aglin:center;
    10. 块级元素中引入背景图片时,url链接要加引号吗?引入的图片出现在块级元素中那个位置
      a) 最好不加引号.规定, 在盒子的底部.
    11. 背景平铺 是默认的吗?怎么让它不平铺
      a) 是的,
      b) background-repeat: no-repeat;
    12. 背景位置怎么设置?如果只指定了一个,那另一个默认值是什么?
      a) background-position: x,y;
      b) 如果只指定一下,另一个默认值为center
    13. 超大背景图片设置
      a) 图片水平居中设置
    14. 背景固定操作,应用场景
      a) background-attachment: fixed;
      b) 应用场景:如背景图片根据我们下拉而不会改变.
    15. 背景简写的方法
      a) background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
      b) 注意,并不所有的都需要写,你可以根据你想设置进行设置.
    16. 背景透明度的写法
      a) background:rgba(R,G, B, A); 这里的a表示是透明度.
    展开全文
  • 从text-align和margin auto说开来

    千次阅读 2015-08-28 20:14:16
    这是本系列第一篇博客,就多啰嗦两句。被老大强制要求写HTML和CSS,因为之前写过CSS觉得...今天就遇到一个问题,一个div里面有一个button,我希望这个button居中,居中嘛,就用了margin,结果是怎么都不好使,结
  • 有些情况下,我们可能想上传的文件路径是由当前Model实例字值组名而成,比如: class Blog(Models.Model): Name=models.CharField('姓名',max_length=100,blank=True) Description=UEditorField('描述',...
  • -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox和TwinTriggerBox增加EnableEdit属性。 -使用Hidden来显示隐藏ExtAspNet控件,而不是使用Visible属性(Visible目前设置为只读属性...
  • 一开始的需求只是表头部分滚动时能一直固定头部,那关键要实现的就是tr能定位。 首先想到的方法是给tr设置relative,用ie6/7测试以下代码: Code <!DOCTYPE ...
  • *同样是元字符,不过它代表的不是字符,也不是位置,而是数量——它指定*前边的内容可以连续重复使用任意次以使整个表达式得到匹配。因此,.*连一起就意味着任意数量的不包含换行的字符。现在\bhi\b.*\bLucy\b的...
  •  负责显示指定的商品详细信息,包括图片、名字、价格、数量等,当一个商品被点击之后,通过返回的id查询到这个数据集合,跳转到商品详细信息的页面,商品发布者可以下方查看留言,并且与有意者打成交易意向。...
  • •Ajax自身也是RIA范畴中的成员,Flex目前还存在很多缺点自然Ajax 还RIA中占据着大哥的位置 怎么使用AJAX? •用法-例子 <HTML><HEAD><TITLE>Hello,world!</TITLE></HEAD>()"><DIVID="ajax-sample"></DIV> 怎么...
  • excel的使用

    2012-11-25 17:06:01
    这时,再选中B2格,光标指向B2矩形右下角的“■”,当光标变成"+"时按住光标沿B列拖动到适当的位置即完成函数值的计算。图7绘制曲线:点击工具栏上的“图表向导”按钮,选择“X,Y散点图”(如图7),然后出现...
  • <div>这是很久很久之前想写的东西,拖了五六个月,没有动笔,现今补齐,内容有些多,对初学者有用,错误之处,望指出。 理解作用域 理解作用域链是Js编程中一个必须要...
  • <div><h2>1. 什么是“划词高亮”? 有些同学可能不太清楚“划词高亮”是指什么,下面就是一个典型的“划词高亮”: <p><a href=...
  • FAQ(持续更新)

    2021-01-08 12:27:51
    <div>项目背景以及解决的问题 <p>C++ Workflow项目起源于搜狗公司的分布式存储项目的通讯引擎,并且发展成为搜狗公司级C++标准,应用于搜狗大多数C++后端服务。项目将通讯与...
  • 如果黑名单中就触发警告并怎么怎么样。 但其实这种做法只能是:防君子不防小人。 <h3>1.3 遇到的问题 项目做到这里遇到一个问题是不论怎样,都没有办法防止开发者做一些我们想禁用的功能。因为是一个...
  • <div>这是训练营的第二周,也持续的做了几十道算法题,每道题自己都竭尽全力的去找尽可能多的解法,且每个解法都实现出来。此前一直对树这个数据结构理解的不是很彻底很到位,以及围绕树...
  • 嗨,你真的懂this吗?

    2020-12-02 23:21:09
    但是调用sayHi时,调用位置会使用person的上下文来引用函数,隐式绑定会把函数调用中的this(即此例sayHi函数中的this)绑定到这个上下文对象(即此例中的person) 需要注意的是:对象属性链...
  • 英特尔面试专项准备

    2020-12-09 13:46:46
    <div><ul><li> 自己挖的坑 </li><li> 单元测试 </li><li>特性用例测试</li><li>虚拟化原理与实现</li><li>CPU虚拟化</li><li>内存虚拟化</li><li>内存复用</li><li>C语言安全规范</li><li>Kubernetes多租户管理</li>...
  • 我们 dispatch 方法中增加一行 <code>var_dump($controller);</code>,刷新就可以看到页面上如下的输出: <p><img alt="" src=...
  • <div>注: 用pc浏览器打开,效果更好(微信中打开会被屏蔽,建议用pc浏览器打开) 蚂蚁金服发布新一代数据可视化引擎G2 <p>G2有一个高大上的名字叫做:The Grammar Of Graphics——...
  • 但是Element是描述固定渲染书中的某一个特定位置的点。简单点说widget作为一种描述是可以复用的,但是element却跟需要绘制的节点一一对应。那element是最终渲染的view么?抱歉,还不是。element...

空空如也

空空如也

1 2
收藏数 27
精华内容 10
关键字:

怎么让div在指定位置