今天在解决一个问题时用到的几个Javascript/Html的知识点，简单总结一下：
一、元素的ContentEditable属性
在Html中，可以将元素的contentEditable属性设置为true，这样就可以由用户来编辑这个控件的大小及内容，例如：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title>
</head>
<body>
<div contentEditable="true">
<span contentEditable = "true">This span is contentEditable</span>
</div>
</body>
</html> 如果要阻止选择可编辑的元素，即不让周围出现可控制的控制点，但仍然可以显示四边箭头的光标，则可以在onControlSelect事件中来阻止：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 3</title>
</head>
<body>
<div contentEditable="true">
<span contentEditable = "true" oncontrolselect="javascript:return false">This span is contentEditable</span>
</div>
</body>
</html>二、关于document.selection
1、Get Selection
可以通过Javascript获取当前页面选择的文字或控件，大致代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<body>
<span> This is a Span </span>
<div> This is a div </div>
<table width="140" height="40" border="1">
<tr>
<td>a</td>
<td>c</td>
</tr>
<tr>
<td>b</td>
<td>d</td>
</tr>
</table>
<hr>
<img src="" width="30" height="30">
<input type=button onclick="getSelectText()" value="Get Selected Text" >
<script>
function getSelectText()
{
if( document.selection.type!="none" )
{
//alert( document.selection.createRange().text )
alert( document.selection.createRange().htmlText )
}
}
</script>
</body>
</html>
2、Set Selection
利用Range的select()来选择指定的文字或元素。如下例子：
<input id="txb" type="text" value="Text Box"/>
<a href="#" onclick="document.getElementById('txb').select()">Select</a>
<span id="spn">this is a span.</span>
<a href="#" onclick="SelectText();">Select</a>
<script language="javascript">
function SelectText()
{
var range = document.body.createTextRange();
range.findText("this is a span.");
range.select();
}
</script>
<select id="slt1"><option>select</option></select>
<select id="slt2"><option>select</option></select>
<a href="#" onclick="SelectControl();">Select</a>
<script language="javascript">
function SelectControl()
{
var controlRange = document.body.createControlRange();
controlRange.add(document.getElementById('slt1'));
controlRange.add(document.getElementById('slt2'));
controlRange.select();
}
</script>三、光标（鼠标/cursor）样式：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 1</title>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr><td align="center">光标/鼠标样式</td></tr>
<tr><td style="cursor:auto">cursor:auto</td></tr>
<tr><td style="cursor:crosshair">cursor:crosshair</td></tr>
<tr><td style="cursor:pointer">cursor:pointer</td></tr>
<tr><td style="cursor:hand">cursor:hand</td></tr>
<tr><td style="cursor:wait">cursor:wait</td></tr>
<tr><td style="cursor:help">cursor:help</td></tr>
<tr><td style="cursor:no-drop">cursor:no-drop</td></tr>
<tr><td style="cursor:text">cursor:text</td></tr>
<tr><td style="cursor:move">cursor:move</td></tr>
<tr><td style="cursor:n-resize">cursor:n-resize</td></tr>
<tr><td style="cursor:s-resize">cursor:s-resize</td></tr>
<tr><td style="cursor:e-resize">cursor:e-resize</td></tr>
<tr><td style="cursor:w-resize">cursor:w-resize</td></tr>
<tr><td style="cursor:ne-resize">cursor:ne-resize</td></tr>
<tr><td style="cursor:nw-resize">cursor:nw-resize</td></tr>
<tr><td style="cursor:se-resize">cursor:se-resize</td></tr>
<tr><td style="cursor:sw-resize">cursor:sw-resize</td></tr>
<tr><td style="cursor:not-allowed">cursor:not-allowed</td></tr>
<tr><td style="cursor:progress">cursor:progress</td></tr>
<tr><td style="cursor:default">cursor:default</td></tr>
<tr><td style="cursor:auto">用户自定义（可用动画） cursor: url(' # '); # = 光标文件地址 (注意文件格式必须为：.cur 或 .ani)。</td></tr>
</table>
</body>
</html>
分享到：
相关推荐
angular-contenteditable, "contenteditable" 属性的Angular 模型 角 contenteditable 一个AngularJS指令，用于将html标记与 contenteditable 属性绑定到模型。安装bower install angular-contenteditable
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样： 当输入内容超过限制的时候，清空用户输入超过限制后的内容。 这个好说… 但是清空...
主要是div通过contenteditable实现可编辑状态，可以实现按钮点击在光标处添加字符的功能
鼠标变换当光标位置在 contenteditable 文档中发生变化时的事件发射器安装使用或或 NPM 安装。 $npm install cursor-change用法 var el = document . getElementsByTagName ( 'div' ) [ 0 ] ;var cursor = require ...
contentEditable有什么问题 野外有问题的用例 通过textarea和顶部的覆盖元素来实现丰富的编辑以可视化提及 具有contenteditable="plaintext-only" ，这似乎是完全由JS驱动的简单元素 通过textarea的工具语法纠错，...
jQuery contentEditable 自动在“ contenteditable”字段上添加事件，并返回更改的数据以进行进一步处理（和保存）。 用法 在其基本实现中，插件方法contentEditable（）附加到具有所有“ contenteditable”字段的...
vue-input-contenteditable 输入不受input[type='text']限制的精美输入。 Vue组件包装器，可通过您期望的所有功能进行contenteditable ： 模型 占位符 最长长度 安装 npm i vue-input-contenteditable 用法 下面...
contenteditable是一个枚举类型的属性，可供选择的值有 空字符串、 true、false 或 inherit（默认）。 当为空字符串时，效果和true一致。 当一个元素的contenteditable状态为ture（contenteditable属性为空字符串，...
使页面可编辑 扩展，使页面可编辑添加contenteditable属性的<body> 。按图标开始编辑，完成后再按一次。一旦页面重新加载更改你已经消失。 支持语言:English,русский
reactjs-contenteditable 一个简单易用的组件，用于 ReactJS 中的 contentEditable 元素。 麻省理工学院执照。 去做
React Div ContentEditable 该软件包为内容可编辑的div提供了一个小的功能性React组件，该div限于纯文本（不格式化“粗体”，“斜体”等）。 安装 npm install @mroc/react-div-contenteditable 例子 import ...
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console....
wysiwyg.js, 所见即所得contenteditable编辑器( 轻量级 跨浏览器 ) 示例：http://wysiwygjs.github.io/最近的更改：闪烁自由标记 API已经更改：Nov 3，2015: classes-> 类 按钮具有任何属性Mar 30，2015: camelcase ...
该插件提供了一个支持v-model的<contenteditable>元素。 它还提供了一些（可选）功能，例如防止html输入和粘贴或换行。 它是由漂亮的（但受设计限制）显示的 。 与vue-contenteditable-directive相反，此插件完全...
$ npm install maxlength-contenteditable --save 纱 $ yarn add maxlength-contenteditable --save 取消CDN 您还可以通过使用CDN上的存储库来跳过yarn / npm安装 < script src =" ...
主要介绍了contenteditable元素的placeholder输入提示语设置方法,需要的朋友可以参考下
解压密码：RJ4587 记得之前我们分享过一款jQuery轻量级网页编辑器和CSS3可视化网页编辑器 基于tinymce编辑器，都非常实用，今天我们再来分享一款利用HTML5 contenteditable属性实现的简易网页编辑器，目前我们只实现...
vue-contenteditable-directive Vue的内置v模型与contenteditable div不兼容-该指令已填写。 为什么要使用内容可编辑的div？ 首先-如果可以使用文本区域或带有v-model的输入，请改为执行此操作。 但是，在textarea...
## Tuts +教程：使用contentEditable属性创建一个WYSIWYG编辑器 ###讲师：Monty Shokeen 在本教程中，我将说明如何使用contentEditable属性创建WYSIWYG编辑器。 即使它具有所见即所得（WYSIWYG）编辑器的所有常见...