表单禁止输入、复制粘贴——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="input1" type="text" value="禁止输入、复制粘贴"/></dir>
<!-- 结合表单自身属性与javascript实现禁止输入、复制粘贴 -->
<div>javascript禁止表单复制粘贴，readonly禁止输入 ：<input id="input2" type="text" value="禁止复制粘贴" readonly/></dir>

js代码片段

window.onload = () => {

		// 控制表单元素失去焦点
		var inhibitingInput = document.getElementById("input1")
		inhibitingInput.onfocus = () => {
			inhibitingInput.blur()
		}
	
		// 使用copy、paste事件设为false
		var banCopyPaste = document.getElementById("input2")
		banCopyPaste.oncopy = () => {
			return false
		}
		banCopyPaste.onpaste = () => {
			return false
		}
	}

效果图：

第一个通过javascript控制元素失去焦点禁止输入、复制粘贴
第二个使用了copy与paste事件结合readonly属性实现禁止输入、复制粘贴