首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

可编辑DIV设置光标位置

平时我们使用文本框input, textarea时,我们有时候需要得到光标的位置或者说设置光标的位置. 但是文本框有个不足,就是不能满足我们插入图片或者其他的一些要求....所以有时候我们使用div来代替文本框. 今天为了搞定设置DI的光标位置.头疼啊,终于可以了,记录一下,网上资料不多. 首先要让DIV启用编辑模式.... 通过设定contenteditable=true开启div的编辑模式.这样DIV就可以跟文本框一样输入内容了。...下面说怎么获取或设置光标位置. 2个步骤 1:获取DIV中的光标位置 2:改变光标位置 var cursor = 0; // 光标位置 document.onselectionchange = function...这样就可以拿到DIV的光标位置了. function moveEnd(obj) { lyTXT1.focus(); var r = document.selection.createRange

6.6K40
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    调整数组顺序使奇数位于偶数前面,且奇数之间、偶数之间的相对位置不变

    输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变。...=1&ru=%2Fta%2Fcoding-interviews&qru=%2Fta%2Fcoding-interviews%2Fquestion-ranking 思路:如果没有要求奇数之间、偶数之间的相对位置的话...现在这里优化一下,只申请一个额外的数组,将原来的数组从左往右扫,遇到奇数就存到新数组的左边,同时将原来的数组从右往左扫,遇到偶数就存到新数组的右边,这样就可以保证左边是奇数,右边是偶数,且奇数之间、偶数之间相对位置不变

    28410

    css经典布局——圣杯布局

    三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 header和footer各自占领屏幕所有宽度,高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 圣杯布局的三种实现 【1】浮动 先定义好header和footer的样式,使之横向撑满。...在container中的三列设为浮动和相对定位(后面会用到),center要放在最前面,footer清除浮动。...left和right空出位置 这时left并没有在最左侧,因为之前已经设置相对定位,所以通过 left: -200px; 把left拉回最左侧 同样的,对于right区域,设置 margin-left...#footer 【2】flex弹性盒子 header和footer设置样式,横向撑满。

    2.7K10

    css中绝对定位_绝对定位和相对定位怎么用

    /*设置相对定位 我们就可以使用四个方向的属性 top left right bottom 相对定位:相对于自己原来的本身定位 top:20px; 那么盒子相对于原来的位置向下移动。...相对定位仅仅的微调我们元素的位置 */ top: 20px; left: 30px; } ...滚动条滚动时,距离页面左上角位置不变。 2.使用bottom属性描述,是以首屏页面左下角为参考点来调整位置。...,跟浏览器位置没关系: bottom属性描述时,以首屏页面左下角为参考点 如果浏览器不动,滚动条动的时候,红色盒子跟随页面动,红绿盒子间距不变。...页面顶端与浏览器顶端重合时,移动浏览器底部,红色盒子距离浏览器底部距离不变。 父辈元素设置相对定位,则子元素绝对定位以父辈元素为参考点。

    2.6K30

    前端性能优化-减少HTTP请求数

    1、图片地图 图片地图允许在一个图片上关联多个URL,目标URL取决于用户单击的图片上的位置。 1) 优点: 把多张图片整合到一张图片中,虽然文件的总体大小不变,但可以减少HTTP请求数。...图片地图将多个图片合并为一张图片,以位置定位超链接,把HTTP请求减少为一个。 3、合并JS脚本和CSS样式表 适当地把多个...4、使用外部JS和CSS文件 在用户不带缓存访问页面的时候,内联所有的js和css的效率更快,原因是外置js和css带来额外的http请求开销,1个http请求相对于3个http请求要更快一些。...其实,使用外部JS和CSS文件会产生更快的访问速度,这是由于外部JS和CSS文件能被浏览器缓存,当下次再请求相同的JS和CSS时,浏览器将不会再发出HTTP请求,而是使用缓存的JS和CSS文件,减少了HTTP

    55130

    CSS动效集锦,视觉魔法的碰撞与融合(三)

    (cos/sin可能有正负,而等式同样成立) 第三步,外部div相对定位,内部小圆绝对定位,并且将步骤二中计算的X/Y作为小圆的bottom和left去设置 这一步也是批量完成,下图以编号8的圆为例 ?...> JS代码如下 第一步:编写calcXYs方法: 以外部DIV左下角为原点,批量计算小圆圆心的横纵坐标 /** * R:大圆半径,2*R = 外部正方形的边长 * r:在大圆边上等距排列的小圆的半径...如果我们通过图像捕捉的方式就可理解的更清楚了,从下面的图可以看到: 水平方向的速度是不变的,而垂直方向的速度是不断加快的 ?...好,下面终于可以讲下CSS的实现思路了 CSS实现原理 设置两个div:外层div和内层div 外层div设置横向匀速运动的动画 内层div设置纵向的匀加速直线运动的动画,加速过程可以用cubic-bezier...实现图示如下,注意开始位置和结束位置是不可见的 ?

    2K21

    Vue 嵌套路由使用总结

    横排显示*/ list-style-type: none; /*去掉前面的点*/ } .nav ul li a { width: 100px; display: block; /*设置为...如果该字符串不以“/”打头,则表示相对路径,相对于父级路由的path。...个人理解,嵌套路由控制内容子组件内容的展示区:实现父组件的内容展示区保持不变,子组件内容展示区动态变化。 2、同this....$router.push(path),这里的path也分相对路径(相对于父级路由的path路径),和绝对路径(相对于“/”)。...总结 通过router-view实现在当前指定容器中动态加载不同组件,展示不同页面的大致实现思路: 1、 在当前页面(这里称之为父页面).vue文件template模板中的指定位置(“包含”子组件内容的容器

    1.2K20

    第213天:12个HTML和CSS必须知道的重点难点问题

    设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、 bottom、left 或 right 声明)。一般不常用。 **relative:相对定位。...**相对定位是相对于元素默认的位置的定位,它偏移的 top,right,bottom,left 的值都以它原来的位置为基准偏移,而不管其他元素会怎么 样。...**位置设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否,元素都会留在那个位置。它始终是以 body 为依据的。...优点:代码简洁 缺点:高度被固定死了,是适合内容固定不变的模块。...src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。

    2.3K20

    nuxt使用antv-l7踩坑

    nuxt.js 下使用 antv-l7 实在是有太多的坑了,官方文档也不是很全,只能不断摸索和尝试,下面我把这些坑记录下来,也许能帮到你。...★这些解决方案不会是唯一解,也不见得是最优解,但至少解决了我的问题,而且还保留了代码的相对整洁和高效。...也不能直接访问,否则一样会出现 window undefined 的错误 解决方案就是和其他的 client only 组件一样,通过 plugin 的方式引入 在 plugins 目录下新建 l7.js...地图图层和标注点的图层拖动时不一致,导致拖动后点的位置错位 position: relative 这个其实在官方文档写了,这个属性很重要,否则地图会铺满上层 div,并且缩放时点的位置会偏移 可以根据自己的情况考虑使用...window 的 resize 事件 scene.on('loaded', () => { window.dispatchEvent(new Event('resize')) }) 这样,窗口大小不变

    2.1K30

    CSS常用实例,web前端开发者不知道这些就太low了

    好处:代码相对优雅,并且符合div+css布局网站的风格 坏处:要设置元素的宽度,控制不好,有可能换行展示,并且要对父元素清除浮动 --> .clearfix{ overflow: hidden...一般情况都是用JS来计算位置,这里我介绍一下CSS来实现水平垂直居中的实现 1、盒子宽高固定 <!...-- 前提:元素宽高固定 实现原理:先让元素的凭意一点与浏览器窗口正中央位置重合,这里选择左上角,然后再让元素向左偏移宽度的一半,向上偏移高度的一半。...class="panel"> 三、元素宽高等比放大缩小 相信不少同学在移动端网页开发中,都插入过图片吧,试问一下,你的图片比例是否可以跟随屏幕尺寸的变化而不变?...宽高都设置成百分比呗,比如宽度100%,高度100% 1、了解width,height,padding百分比设置 <!

    1.8K120

    问题总结

    关于CSS中position定位: 开始学习的时候简单粗暴的总结了 absolute; 绝对定位(相对于浏览器边界),拉动滚动条,位置随之改变。...fixed 固定位置相对于浏览器窗口,拉动滚动条,位置不变。 relative 相对定位,相对于该元素本该出现的位置:在原本应该出现的位置偏移。...relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级。...注: CSS中定位的层叠分级:z-index: auto | namber; 总结: absolute; 绝对定位(相对于浏览器边界) 选取其最近一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性...简单来说,如果div中没有设置定位,他里面再套一个div设置绝对定位,里面的div不会出现在外面div里面。如果两个div设置absolute,里面的div就是相对div来进行定位的。

    63150
    领券