vue contenteditable 光标丢失

2024-11-04

div设置contenteditable="true" 光标消失：原因

原因1:document.onselectstart= function(){return false;}; 原因2:父层设置了user-select:none 导致子层设置了 contenteditable 会出现异常,但是在ie和chrome并没有体现出来如果把编辑框换成input标签不会由于禁止文本选中而出现光标消失的情况了,可以自己尝试 <!DOCTYPE html> <html lang="en"> <head> <meta ch

js之向div contenteditable光标位置添加字符

js之向div contenteditable光标位置添加字符原理: 在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的. 当我们去点击一个输入框的时候,实际上它会产生一个选中对象-selection(就是我们可以看到的文字变成蓝色的那个区域),selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开始和结束的当你点击

contenteditable 光标定位到最后

在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari ob

html5中contenteditable 光标_如何设置光标位置

在js中,光标是一个对象,当你选中某个元素的时候才会出现光标对象.比如:我们点击一个输入框,实际会产生一个选中对象-selection,这个对象我们可以通过indow.getSelection()来获取:selection只存在1个,所以当你切换到其他输入框额时候,selection同样会跟着变化的.在选中的情况下有一个光标叫做range,和selection一样. 在contenteditable 属性中,当点击该区域的时候,光标默认显示在区域内容最后一位.如: <div id="box

electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天

一.项目概况基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息发送/动态表情,图片/视频预览,拖拽图片/粘贴截图发送,朋友圈/红包/换肤等功能. 二.效果图三.技术栈框架技术:electron + electron-vue + vue 状态管理:Vuex 地址路由:Vue-router 字体图标:阿里iconfont字体图标库弹窗插件:wcPop 打包工

js获取光标位置并插入内容

先来几个网上找的参考资源,我爱互联网,互联网使我变得更加强大. https://blog.csdn.net/mafan121/article/details/78519348 详细篇,该作者很用心的解释了每一个api的用法. https://blog.csdn.net/smartsmile2012/article/details/53642082 https://blog.csdn.net/liushuijinger/article/details/48834541 在光标位置插入内容 http

EditText双光标问题

模拟器会出现中双的光标从没有字符开始输入多了一个竖线怎么回事?光标丢失就好了,下面是手机情况修改样式更换一个样式试试看:比如我以前的是 android:theme="@android:style/Theme.Translucent.NoTitleBar" 删除后使用 application 默认的 android:theme="@style/AppTheme"就好了

Laravel+vue实现history模式URL可行方案

项目:laravel + vue 实现前后端分离.vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. hash URL 例如:Vue 使用History记录上一页面的数据. history 模式时,URL就像正常的 url,例如 http://yoursite.com/user/id. 没有特别的要求的话,hash模式亦正常访问.好嘛,产品要求URL要像正常那样的 -- history模式的.看看vu

文本框字符限制、focus光标定位

一.为一个元素的所有子元素设置统一样式:.className * { color: #6666 } 二.正则表达式: 1.去除所有HTML标签只保留文字: /<\/?.+?\/?>/2.去除空格:/\s+/ \s:匹配任何空白符(空格.制表符.换页.换行-),等价于[ \f\n\r\t\v] \s+:匹配上述任意多个字符 "." 表示除\n之外的任意字符 "*" 表示匹配0-无穷 "+" 表示匹配1-无穷三.设置contentedi

jQuery 绑定事件

$('input').bind('click mouseover', fn); $('input').bind({ mouseover: fn(){}, mouseover:fn(){} }); 删除事件 unbind() $('input').unbind();//删除全部事件 $('input').unbind();//删除其中的cilck事件 $(input').unbind('click', fn);//删除click的fn()事件简写事件绑定的方法 ========鼠标事件 $('i

JS 基础事件的用法

// 1.9以上用on // 案例一 // $('#btn').on('click', function(){ // //console.log(1); // alert('测试...'); // }); // 案例二 // $('#btn').on('click mouseover', function(){ // //console.log(1); // alert('测试...'); // }); // 案例三 // $('#btn').on('mouseover mouseout', f

獲取 Textarea 的光標位置（摘自網絡）

在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的.下面我们一起来看看如何获取到 Textarea 元素中的光标位置.首先,我们用 rangeData 对象作为数据存储,并获得焦点: var rangeData = {start: 0, end: 0, text: "" }; textarea.focus(); 对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易: rangeData.start = el.selecti

jQuery的基本事件

1.用法     2.基本事件的总结   &

jQuery事件篇---基础事件

写在前面: 有一段时间未更新博客了,利用这段时间,重新看了<jQuery基础教程第四版>和<锋利的jQuery 第二版>,这两本书绝对是jQuery入门非常好的书,值得多读几遍,并将上面的代码逐个敲一下来体会jQuery的魅力! 利用接下来一段时间结合这两本书对jQuery基础知识做个梳理,算是读书笔记吧,方便他人,方便自己,不足之处,希望读者多多指教! 发文不易,转载注明出处! 内容摘要: 1.绑定事件 2.简写事件 3.复合事件一．绑定事件 jQuery 通过.bind()

Jquery8 基础事件

学习要点: 1.绑定事件 2.简写事件 3.复合事件 JavaScript 有一个非常重要的功能,就是事件驱动.当页面完全加载后,用户通过鼠标或键盘触发页面中绑定事件的元素即可触发.jQuery 为开发者更有效率的编写事件行为,封装了大量有益的事件方法. 一．绑定事件常用的事件有:click.dblclick.mousedown.mouseup.mousemove.mouseover.mouseout.change.select.submit.keydown.keypress.keyup.bl

dosbox+masm汇编环境的安装和使用

1. 下载dosbox安装程序:DOSBox0.74-win32-installer.exe 链接:https://pan.baidu.com/s/1gXPKTT-xKb6BpjOJdhmudA 密码:khqs 2. 安装.注意它是32位的.我装在了C盘program files(X86). 3. 下载masm文件. 链接: https://pan.baidu.com/s/1viOJVOvwwkGe0N2VZuNTqA masm文件夹内至少要包含这4个文件:masm.exe, link.exe,

contenteditable联合v-html实现数据双向绑定的vue组件

全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/11466197.html 先看最终实现的demo效果图: (1)上面看似文本域的大框是通过给div添加contenteditable=true属性实现的Vue组件DivEditable.vue: (2)下面的输入框是父组件中与DivEditable绑定相同变量的输入框,用于展示数据的双向绑定效果: (3)按钮实现绑定变量的赋值操作: (4)DivEditable的blur事件可触发文本过滤或样式

可编辑DIV （contenteditable="true"）在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

vue中使用 contenteditable 制作输入框并使用v-model做双向绑定

<template> <div class="div-input" :class="value.length > 0 ? 'placeholder_hide' : ''" :style="{'min-width': minWidth}" :contenteditable="input" :placeholder="placeholder" @focus="ischecked

vue项目中打包编译后，CSS样式【-webkit-box-orient: vertical】打包后丢失问题

最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了一下,发现可能是optimize-css-assets-webpack-plugin这个插件的问题,导致打包时这个属性和注释混在了一起(个人猜测),其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可,如下图: 也就是说在使用“-webkit-box-orient: vertical;”需要这

vue contenteditable 光标丢失

热门专题