焦点事件

1. 焦点事件

获得焦点事件

onfocus

失去焦点事件

onblur

2. 阻止默认行为

e.preventDefault()

比如:阻止超链接跳转,阻止右键点击事件

案列 

 <style>

        input{

            outline: none;

        }

        /* focus伪类选择器,表示获得焦点样式 */

        input:focus{

            background-color: lightblue;

        }

    </style>

<div>

        <span>账号</span>

        <input type="text" placeholder="请输入账号">

    </div>

    <div>

        <span>密码</span>

        <input type="password" placeholder="请输入密码">

    </div>

    <script>

        let inputs = document.querySelectorAll('input')

        inputs.forEach(r=>{

            // 备份文本框的placeholder

            let placeholder = r.placeholder

            // 获取焦点事件

            r.onfocus = function(){

                // 文本框的placeholder设置为空

                r.placeholder = ''

            }

            // 失去焦点事件

            r.onblur = function(){

                // 文本框的placeholder恢复

                r.placeholder = placeholder

            }

        })

    </script>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容