美文网首页
鼠标相关

鼠标相关

作者: xiaolizhenzhen | 来源:发表于2018-02-07 14:30 被阅读0次

    1. 鼠标拉选文字的操作

    1.如果禁止鼠标拉选文字

    css操作:
        .unselectable {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
        }
        
     js操作:
        document.onselectstart = function(){
            return false;
        }
    

    2.如何获取鼠标拉选选择的值

    var funcGetSelectText = function(){
        var txt = '';
        if(document.selection){ // ie
            txt = document.selection.createRange().text;
        }else{ // 非ie
            txt = document.getSelection();
        }
        return txt.toString();
    }
        
        // 一般用mouseup调用当前函数
    

    3.如何定制css拉选选中文字的样式

    ::-moz-selection {
      background: #26a69a;
      color: #ffffff;
    }
    ::-webkit-selection {
      background: #26a69a;
      color: #ffffff;
    }
    ::-ms-selection {
      background: #26a69a;
      color: #ffffff;
    }
    ::-khtml-selection {
      background: #26a69a;
      color: #ffffff;
    }
    ::selection {
      background: #26a69a;
      color: #ffffff;
    }
    
    /** 注意:section的文字效果仅作用于 背景颜色(不包含背景图片) 字体颜色,不作用于 字体大小,字体样式,字体粗细等等**/
    

    2.鼠标的样式

    cursor.png

    参考:cursor

    3.input文本框不可编辑的3种方法

    • 1、disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。
      disabled 属性无法与 <input type="hidden"> 一起使用。
      示例:<input type="text" disabled="disabled" />
    • 2、readonly 属性规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值。 readonly 属性可以防止用户对值进行修改。
      readonly 属性可与 <input type="text"><input type="password">配合使用。
      示例:<input type="text" readonly="readonly">

    • 3、readonly unselectable="on" 该属性跟disable类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。
      示例:<input type="text" readonly unselectable="on" >

    相关文章

      网友评论

          本文标题:鼠标相关

          本文链接:https://www.haomeiwen.com/subject/ehaozxtx.html