两种让元素获取焦点的方法

最新推荐文章于 2021-05-27 05:01:50 发布

阿Q今天奇遇了吗

最新推荐文章于 2021-05-27 05:01:50 发布

阅读量2k

点赞数 1

文章标签： HTML5 焦点

本文链接：https://blog.csdn.net/u013345082/article/details/103216044

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
    <style>
        .test1{width:400px;min-height:120px;max-height:300px;border:1px solid #000;background:#eee;overflow: hidden;}
        
        .test2{width:400px;min-height:120px;max-height:300px;border:1px solid #000;background:#eee;margin-top:80px;}
        
        .test3{margin-top:40px;background:#eee;}
        
    </style>
</head>

<body>
<!--    
        关键属性：contenteditable
        值为true/false(元素可编辑/不可编辑)     
        HTML5的新属性
        兼容：目前所有主流浏览器都支持，包括IE
-->
    <div class="test1" contenteditable="true">contenteditable</div>
    
    <!--    除了IE上false有效，其他都无效-->
    <input type="text" contenteditable="false" class="test3">
  
    
    
    
<!--    
        原本是用来规定元素tab键控制次序的，数值越小越靠前触发
        几乎所有浏览器都支持这个属性，除了Safari
-->
    <div class="test2" tabindex="0">tabindex</div>

    
    
</body>
    <script>
        var test1 = document.querySelector(".test1");
        
        test1.onfocus = function(){
            test1.style.background = "#f00";
        }
        test1.onblur = function(){
            test1.style.background = "#333";
        }
        
        
        
        var test2 = document.querySelector(".test2");
        
        test2.onfocus = function(){
            test2.style.background = "#f00";
        }
        test2.onblur = function(){
            test2.style.background = "#333";
        }
        
        
        
        var test3 = document.querySelector(".test3");
        
        test3.onfocus = function(){
            test3.style.background = "#f00";
        }
        test3.onblur = function(){
            test3.style.background = "#333";
        }
        
    </script>
</html>

contenteditable还有一个有意思的效果，在网页中按F12打开控制台，在控制台输入contenteditable=“true”
结果返回true就可以直接编辑当前网页的内容。

阿Q今天奇遇了吗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两种让元素获取焦点的方法

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title> <style> .test1{width:400px;min-height:120px;max-height:300px;border:1px ...
复制链接

扫一扫