사용자가 jquery의 입력 상자에 내용을 입력하는 것을 방지하는 방법

웹 개발 시 입력 상자에 사용자가 입력하는 내용을 제한해야 하는 경우가 있습니다. 이때 입력 상자를 조작하려면 일부 jQuery 메서드를 사용해야 합니다. 이 글에서는 jQuery를 사용하여 사용자가 입력 상자에 내용을 입력하지 못하도록 하는 방법을 주로 소개합니다.

1. 입력 상자 비활성화의 기본 기능

jQuery를 통해 입력 상자의 입력을 비활성화하기 전에 먼저 입력 태그의 유형 속성을 이해해야 합니다. 입력 태그의 유형 속성 값에는 주로 다음이 포함됩니다.

1. text: 텍스트 상자
2. password: 비밀번호 상자
3. radio: 라디오 버튼
4. checkbox: 체크박스
5. submit: 제출 버튼
6. reset: 재설정 버튼
7. file: 파일 업로드
8. hidden: 숨겨진 필드
9. date: 날짜 선택 Device
10. number: 숫자 입력 상자
11. email: 이메일 입력 상자
12. tel: 전화번호 입력 상자
13. search: 검색 입력 상자

다음은 jQuery를 사용하여 기본 기능을 비활성화하는 코드입니다. 입력 상자:

$(document).ready(function() {
  // 禁止文本框和密码框的默认功能
  $('input[type="text"],input[type="password"]').bind('keypress', function(event) {
    if (event.keyCode == 13) {
      event.preventDefault();
    }
  });
});

위 코드에서는 먼저 jQuery의 .ready() 메서드를 사용하여 페이지가 로드될 때까지 기다린 다음 .keypress 이벤트를 바인딩하여 입력 상자의 기본 캐리지 리턴 제출 기능을 방지합니다. 그 중 event.keyCode는 누른 키보드 키 코드를 나타내고, 13은 Enter 키의 keyCode를 나타냅니다.

2. 입력 상자에 입력을 비활성화합니다

때때로 사용자가 입력 상자에 텍스트를 입력하지 못하게 해야 할 경우가 있습니다. 다음은 jQuery를 사용하여 입력 상자에 입력을 비활성화하는 코드입니다.

$(document).ready(function() {
  // 禁止文本框和密码框输入
  $('input[type="text"],input[type="password"]').bind('input propertychange', function(event) {
    this.value = this.value.replace(/[^\u0000-\u00ff]/g, ''); // 只允许输入英文、数字和中文等ASCII字符
  });
});

위 코드에서 , .input 및 .propertychange 이벤트를 바인딩하여 입력 상자의 콘텐츠 변경을 모니터링합니다. 이벤트 처리 함수에서는 String 객체의 replacement() 메소드를 호출하여 /¹/g 정규식을 통해 ASCII가 아닌 문자를 필터링하여 입력 금지 효과를 얻었습니다.

3. 입력 상자 비활성화

때로는 모든 입력 상자를 비활성화해야 할 때가 있습니다. 다음은 jQuery를 사용하여 입력 상자를 비활성화하는 코드입니다.

$(document).ready(function() {
  // 禁用所有输入框
  $('input').attr('disabled', 'disabled');
});

위 코드에서는 jQuery를 사용하여 모든 입력 태그를 선택하고 attr() 메소드는 "disabled" 속성을 설정하여 모든 입력 상자를 비활성화합니다.

4. 단일 입력 상자 비활성화

때때로 단일 입력 상자만 비활성화해야 하는 경우는 다음과 같습니다. jQuery를 사용하여 단일 입력 상자를 비활성화하는 코드는 다음과 같습니다.

$(document).ready(function() {
  // 禁用文本框和密码框输入
  $('#input-id').attr('disabled', 'disabled');
});

위 코드에서는 다음을 통해 얻습니다. 선택기 "#" + id 지정된 입력 상자를 선택하고 .attr() 메서드를 통해 "disabled" 속성을 설정하여 지정된 입력 상자를 비활성화합니다.

요약:

이 글에서는 주로 입력 상자의 기본 기능 비활성화, 입력 상자 입력 비활성화, 모든 입력 상자 비활성화 및 단일 입력 상자 비활성화를 포함하여 jQuery를 사용하여 입력 상자 입력을 비활성화하는 몇 가지 방법을 소개합니다. 실제 웹 개발 업무에 도움이 되길 바랍니다.

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