表单禁止输入、复制粘贴——javascript+html

表单禁止输入

input元素中，自带了一些可以禁止用户输入的属性比如disabled和readonly

<!-- 使用disabled禁止输入 -->
<div">表单元素禁止输入 一 ：<input type="text" value="禁止输入" disabled/></div> 
<!-- 使用readonly禁止输入 -->
<div>表单元素禁止输入 三 ：<input type="text" value="禁止输入" readonly/></div>

效果图：
这里写图片描述
第一个使用了disabled，disabled属性禁用了input元素，input元素不可用也不可点击
第二个使用了readonly，可通过Tag跳转进入该字段，字段不能修改，但可以复制粘贴

表单禁止复制粘贴

html代码片段

<!-- 通过copy、paste事件禁止复制粘贴事件 -->
<div>javascript禁止表单复制粘贴 ：<input id="input1" type="text" value="禁止复制粘贴"/></dir><br/><br/>

js代码片段

window.onload = () => {
            // 使用copy、paste事件设为false
            var banCopyPaste = document.getElementById("input1")
            banCopyPaste.oncopy = () => {
                return false
            }
            banCopyPaste.onpaste = () => {
                return false
            }
        }

效果图：

这里写图片描述
用javascript获取input id将copy同意paste事件都设为false，使得表单禁止复制粘贴

表单禁止输入、复制粘贴

html代码片段

<!-- 使元素失去焦点 -->
<div>javascript禁止表单输出、复制粘贴 ：<input id="input2" type="text" value="禁止输入、复制粘贴"/></dir>
<!-- 结合表单自身属性与javascript实现禁止输入、复制粘贴 -->
<div>javascript禁止表单复制粘贴，readonly禁止输入 ：<input id="input1" type="text" value="禁止复制粘贴" readonly/></dir>

js代码片段

window.onload = () => {
        // 使用copy、paste事件设为false
        var banCopyPaste = document.getElementById("input1")
        banCopyPaste.oncopy = () => {
            return false
        }
        banCopyPaste.onpaste = () => {
            return false
        }

        // 控制表单元素失去焦点
        var inhibitingInput = document.getElementById("input2")
        inhibitingInput.onfocus = () => {
            inhibitingInput.blur()
        }
    }

效果图：
这里写图片描述
第一个通过javascript控制元素失去焦点禁止输入、复制粘贴
第二个使用了copy与paste事件结合readonly属性实现禁止输入、复制粘贴

表单禁止输入、复制粘贴——javascript+html

猜你喜欢