Javascript/HTML的几个问题（ContentEditable,Selection and cursor style）

最新推荐文章于 2022-06-06 19:21:18 发布

sallay

最新推荐文章于 2022-06-06 19:21:18 发布

阅读量2.7k

点赞数

分类专栏： JS&amp;HTML&amp;CSS 文章标签： javascript border textbox html url

本文链接：https://blog.csdn.net/sallay/article/details/2916423

版权

JS&HTML&CSS 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

今天在解决一个问题时用到的几个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 οnclick="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>
 
 