> 웹 프론트엔드 > 프런트엔드 Q&A > html5 입력에서 입력을 금지하는 방법

html5 입력에서 입력을 금지하는 방법

藏色散人
풀어 주다: 2023-02-03 10:02:12
원래의
3351명이 탐색했습니다.

HTML5 입력에서 입력 금지를 구현하는 방법: 1. 입력 필드를 읽기 전용으로 지정하고 읽기 전용을 통해 복사 가능하도록 지정합니다. 2. 비활성화된 입력 요소를 복사할 수 있지만 포커스를 받을 수 없음을 인식하려면 비활성화를 사용합니다. 4. "οnfοcus="this.blur();""를 사용하여 텍스트를 입력할 수 없음을 인식합니다.

html5 입력에서 입력을 금지하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, HTML5 버전, DELL G3 컴퓨터

html5 입력 입력을 금지하는 방법은 무엇입니까?

입력 금지(포커스 획득 금지) 여러 방법 및 html의 입력 제한 개수 및 길이

입력 금지(포커스 획득 금지)

1: 읽기 전용은 입력 필드를 읽도록 규정합니다. -복사만 가능하지만 사용자는 Tab 키를 사용하여 필드로 전환하고 선택하고 포커스를 받고 해당 텍스트를 선택하거나 복사할 수 있습니다.

<input type="text" value="禁止输入,可以使用Tab键切换到该字段" readonly="readonly">
로그인 후 복사

2: 비활성화됨 비활성화된 입력 요소는 복사가 가능하며 포커스를 받을 수 없습니다. 설정 후에는 텍스트 색상이 회색으로 변합니다. 과 함께 사용할 수 없습니다.

<input type="text" value="可复制,不能接收焦点,字的颜色会变成灰" disabled="disabled">
로그인 후 복사

3: 입력의 최대 길이를 0

<input type="text"  maxlength="0">
로그인 후 복사

4로 제어하여 달성: οnfοcus="this.blur();" onfocuse는 입력할 텍스트 상자에 커서를 놓으면 초점이 맞춰진다는 의미입니다. . 그러나 여기에 "this.blur()"가 추가되었습니다. 흐림 기능은 초점을 제거하는 것입니다. 즉, 이 텍스트 상자에 커서를 놓을 수 없습니다.

<input type="text" value="去除聚焦,不能输入文本" onfocus="this.blur();">
로그인 후 복사

숫자를 입력하세요. 및 길이 제한

1.type='number'은 입력을 숫자로 제한하고 oninput이 제한 길이를 결정합니다(type='number'를 사용한 후 maxlength를 사용할 수 없는 것으로 확인됨)

<input class="inputs" type="number" value="只输入数字,长度11位" oninput="if(value.length>11)value=value.slice(0,11)"  />
로그인 후 복사

2. maxlength를 사용하여 제한 길이, oninput은 입력 상자를 순수한 숫자로 제한합니다

<input type="text" placeholder="请输入您的手机号" oninput = "value=value.replace(/[^\d]/g,&#39;&#39;)" maxlength="11">
로그인 후 복사

a, onkeyup = "value=value.replace(/[^d]/g,'')"

onkeyup 이벤트를 사용하면 버그가 있습니다. , 중국어 입력방법 상태에서 한자를 입력한 후 바로 엔터하면 문자가 바로 입력됩니다

b, onchange = "value=value.replace(/[^d]/g,'')"

를 이용하세요 onchange 이벤트. 내용을 입력한 후 입력이 포커스를 잃은 경우에만 발생합니다. 결과를 가져오지만 입력 시 응답할 수 없습니다

c, oninput = "value=value.replace(/[^d]/g ,'')"

oninput 이벤트를 사용하여 위의 두 가지 문제를 완벽하게 해결합니다. 문제, 테스트에서는 아직 다른 문제가 나타나지 않았습니다.

추천 학습: "HTML 비디오 튜토리얼"

위 내용은 html5 입력에서 입력을 금지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿