今天在解决一个问题时用到的几个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>
分享到：
相关推荐
可编辑 obj.contenteditable=true 执行菜单命令 obj.execCommand 双字节字符 /[^x00-xff]/ 汉字 /[u4e00-u9fa5]/ 让英文字符串超出表格宽度自动换行 word-wrap: break-word; word-break: break-all; ...
项目包含完整前后端源码和数据库文件 环境说明： 开发语言：Java 框架：ssm，mybatis JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 服务器：tomcat7
YOLO系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中，文件名末尾是部分类别名称; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值； 【注】可以下拉页面，在资源详情处查看标签具体内容；
1、嵌入式物联网单片机项目开发例程，简单、方便、好用，节省开发时间。 2、代码使用IAR软件开发，当前在CC2530上运行，如果是其他型号芯片，请自行移植。 3、软件下载时，请注意接上硬件，并确认烧录器连接正常。 4、有偿指导v：wulianjishu666; 5、如果接入其他传感器，请查看账号发布的其他资料。 6、单片机与模块的接线，在代码当中均有定义，请自行对照。 7、若硬件有差异，请根据自身情况调整代码，程序仅供参考学习。 8、代码有注释说明，请耐心阅读。 9、例程具有一定专业性，非专业人士请谨慎操作。
手语图像分类数据集【已标注，约2,500张数据】 分类个数【36】：0、1、a、b等【具体查看json文件】 划分了训练集、测试集。存放各自的同一类数据图片。如果想可视化数据集，可以运行资源中的show脚本。 CNN分类网络改进：https://blog.csdn.net/qq_44886601/category_12858320.html 【更多图像分类、图像分割（医学）、目标检测（yolo）的项目以及相应网络的改进，可以参考本人主页：https://blog.csdn.net/qq_44886601/category_12803200.html】
CNCAP 2024打分表
系统可以提供信息显示和相应服务，其管理智慧校园管理系统信息，查看智慧校园管理系统信息，管理智慧校园管理系统。 项目包含完整前后端源码和数据库文件 环境说明： 开发语言：Java JDK版本：JDK1.8 数据库：mysql 5.7 数据库工具：Navicat11 开发软件：eclipse/idea Maven包：Maven3.3 部署容器：tomcat7 小程序开发工具：hbuildx/微信开发者工具
Matlab领域上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
影音互动科普网站功能描述 影音互动科普网站旨在通过多媒体形式（视频、音频、互动内容等）传播科学知识，提高公众的科学素养。该网站结合娱乐与教育，提供易于理解的科普内容，吸引不同年龄层次的用户参与和学习。以下是该网站的主要功能描述： 1. 用户注册与登录 用户注册：用户可以通过电子邮箱、手机号或社交账号（如微信、微博等）注册，提供基本信息并设置密码。 用户登录：支持通过注册的账号登录，保障个人信息的安全性，并提供自动登录功能。 2. 科普视频与音频库 视频内容：网站提供各类科普视频，包括短视频、纪录片、讲座、实验演示等，覆盖物理、化学、生物、地理、天文等多个领域。 音频内容：提供科普音频节目，如科普广播、播客、专题讲座等，便于用户在日常生活中进行学习。 视频分类：按科目、难度、年龄层、时长等维度对视频和音频进行分类，帮助用户更精准地找到感兴趣的内容。 字幕与多语言支持：提供字幕、翻译和多语种版本，帮助不同语言的用户学习。 3. 互动问答与讨论区 专家问答：用户可以向科普专家提问，专家提供详尽的解答，解决用户的科学疑惑。 社区讨论：用户可以在视频下方或专题页面中发表评论、提问或与其他用户
倪海厦讲义及笔记，易学数据测算
内容概要：本文档是《组合数学答案-网络流传版.pdf》的内容，主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析，帮助读者加深对组合数学概念和技巧的理解。 适用人群：适合初学者和有一定基础的学习者。 使用场景及目标：可以在学习组合数学课程时作为练习题参考，也可以在复习考试或准备竞赛时使用，目的是提高解决组合数学问题的能力。 其他说明：文档中的题目覆盖了组合数学的基本知识点，适合逐步深入学习。每个题目都有详细的解答步骤，有助于读者掌握解题思路和方法。
内容概要：本文是一篇完整的管理系统开发指南，详细介绍了功能要求、技术栈选择、数据库设计、用户界面搭建以及安全控制等方面的内容。功能要求包括用户管理、权限控制、数据管理、系统日志、通知与消息、统计分析和扩展模块。使用的技术栈涵盖了后端（Java、Python、C#等）和前端（React、Vue.js、Angular等）技术，以及数据库设计和安全控制措施。 适合人群：具备一定开发经验的软件工程师和技术管理人员。 使用场景及目标：适用于企业级管理系统开发项目，旨在构建一个高效、安全且易于扩展的系统。开发者可以参考本文档进行系统的设计和实现，确保系统满足业务需求。 其他说明：本文档提供了详细的步骤和最佳实践，帮助开发者更好地理解和应用管理系统开发的各种技术。通过结合实际案例和实践经验，本文档能够为开发者提供有价值的指导。
听器听力损伤程度分级表.docx
MATLAB代码：基于条件风险价值的合作型Stackerlberg博弈微网动态定价与优化调度 关键词：微网优化调度 条件风险价值 合作博弈 纳什谈判 参考文档：《A cooperative Stackelberg game based energy management considering price discrimination and risk assessment》完美复现 仿真平台：MATLAB yalmip+cplex+mosek 主要内容：代码主要做的是一个基于合作型Stackerlberg博弈的考虑差别定价和风险管理的微网动态定价与调度策略，提出了一个双层能源管理框架，实现多个微网间的P2P能源交易，上层为零商的动态定价模型，目标是社会福利最大化；下层是多个产消者的合作博弈模型，优化各产消者的能量管理策略。 同时，采用纳什谈判法对多个产消者的合作剩余进行公平分配，还考虑了运行风险，采用条件风险价值（CVaR）随机规划方法来描述零商的预期损失。 求解方面，双层模型被基于KKT条件转为单层模型，模型可以高效求解。 这段代码是一个基于合作型Stackelberg博弈的微网
YOLO系列算法目标检测数据集，包含标签，可以直接训练模型和验证测试，数据集已经划分好，包含数据集配置文件data.yaml，适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法； 包含两种标签格:yolo格式（txt文件）和voc格式（xml文件），分别保存在两个文件夹中，文件名末尾是部分类别名称; yolo格式：<class> <x_center> <y_center> <width> <height>， 其中： <class> 是目标的类别索引（从0开始）。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标，这些坐标是相对于图像宽度和高度的比例值，范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度，也是相对于图像宽度和高度的比例值； 【注】可以下拉页面，在资源详情处查看标签具体内容；
20块钱买的【动漫网页设计】源码，免费分享出来啦,如果要积分那是系统自动涨的啦。 内容概要：本资源是一份动漫网页设计的源码，价格仅为20元，作者将其免费分享给大家。该源码包含了动漫元素的设计，包括背景、图标、按钮等，同时也提供了一些常见的网页布局和交互效果。通过该资源，可以学习到动漫网页设计的基本原理和技巧。 适用人群：本资源适用于对动漫网页设计感兴趣的人群，包括网页设计师、UI设计师、前端开发工程师等。同时，对于想要学习动漫网页设计的初学者也非常适用。 使用场景及目标：该资源可以用于学习和实践动漫网页设计的技巧和原理。通过学习该源码，可以了解到动漫网页设计的基本要素和设计思路，同时也可以借鉴其中的设计元素和交互效果，应用到自己的网页设计中。 其他说明：本资源是作者自己设计的，经过了多次修改和优化，具有一定的参考价值。同时，作者也将其价格设置的非常低，希望更多的人可以学习到动漫网页设计的技巧和方法。如果您对该资源有任何疑问或建议，欢迎在评论区留言，作者会尽快回复。。内容来源于网络分享，如有侵权请联系我删除。另外如果没有积分的同学需要下载，请私信我。
自考 本科 C++程序设计-课本 参考答案
每周质量安全排查报告.docx
YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip
内存搜索工具(易).rar