今天在解决一个问题时用到的几个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 文档中发生变化时的事件发射器安装使用或或 NPM 安装。 $npm install cursor-change用法 var el = document . getElementsByTagName ( 'div' ) [ 0 ] ;var cursor = require ...
主要是div通过contenteditable实现可编辑状态，可以实现按钮点击在光标处添加字符的功能
最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性就首当其冲了，结果，问题来了… 首先 评论区 长这样： 当输入内容超过限制的时候，清空用户输入超过限制后的内容。 这个好说… 但是清空...
一旦设置了`contenteditable="true"`，用户就可以在浏览器中直接输入、删除、格式化文本，类似于Word或Google Docs的在线编辑体验。这个属性为创建轻量级的富文本编辑器提供了可能，无需依赖复杂的JavaScript库或...
- 当一个元素的`contenteditable`状态为"true"（即`contenteditable`属性为空字符串，或设置为"true"，或设置为"inherit"且其父元素的状态为"true"）时，意味着该元素是可编辑的。 - 反之，如果元素的`...
jQuery contentEditable 自动在“ contenteditable”字段上添加事件，并返回更改的数据以进行进一步处理（和保存）。 用法 在其基本实现中，插件方法contentEditable（）附加到具有所有“ contenteditable”字段的...
然而，在使用contenteditable元素时，常常需要提供一些输入提示信息，类似于input或textarea元素中的placeholder属性。但遗憾的是，contenteditable元素原生并不支持placeholder属性，因此我们需要采用一些技巧来...
contentEditable有什么问题 野外有问题的用例 通过textarea和顶部的覆盖元素来实现丰富的编辑以可视化提及 具有contenteditable="plaintext-only" ，这似乎是完全由JS驱动的简单元素 通过textarea的工具语法纠错，...
vue-input-contenteditable 输入不受input[type='text']限制的精美输入。 Vue组件包装器，可通过您期望的所有功能进行contenteditable ： 模型 占位符 最长长度 安装 npm i vue-input-contenteditable 用法 下面...
`reactjs-contenteditable`组件是为了解决在React应用中优雅地处理`contentEditable`元素而创建的。这个开源项目提供了对`contentEditable`更友好的封装，使得在React开发中使用起来更加方便。 `reactjs-...
为了让用户在div元素中输入内容，我们可以给这个div元素添加`contenteditable`属性。然而，当我们在Vue组件中处理这种输入时，经常遇到光标定位的问题，尤其是在程序控制下非人工输入后光标会丢失的问题。接下来将...
通过设置`contentEditable`属性为`true`，用户就可以在指定的元素内输入、修改或删除文本，类似于一个简单的富文本编辑器。 `contentEditable`属性的工作方式如下： 1. **启用编辑**：当一个元素的`...
electron+vue 实现 div contenteditable 截图功能 electron+vue 实现 div contenteditable 截图功能是 electron 和 vue 框架结合实现的截图功能。下面将详细介绍 electron+vue 实现 div contenteditable 截图功能的...
使页面可编辑 扩展，使页面可编辑添加contenteditable属性的<body> 。按图标开始编辑，完成后再按一次。一旦页面重新加载更改你已经消失。 支持语言:English,русский
wysiwyg.js, 所见即所得contenteditable编辑器( 轻量级 跨浏览器 ) 示例：http://wysiwygjs.github.io/最近的更改：闪烁自由标记 API已经更改：Nov 3，2015: classes-> 类 按钮具有任何属性Mar 30，2015: camelcase ...
以往我们想要实现可编辑的文本区域，通常会使用textarea元素，但在某些场景下，使用div配合contenteditable属性或许会更加灵活和强大。 属性的使用非常简单，只需要在HTML元素上添加contenteditable="true"，这个...
标题中的"Paste_ContentEditable_DIV"指的是一个与JavaScript相关的项目，可能是用于处理HTML内容可编辑区域（contenteditable div）的粘贴功能。在Web开发中，contenteditable属性允许用户在指定的HTML元素（如div...
该插件提供了一个支持v-model的<contenteditable>元素。 它还提供了一些（可选）功能，例如防止html输入和粘贴或换行。 它是由漂亮的（但受设计限制）显示的 。 与vue-contenteditable-directive相反，此插件完全...