jquery 입력은 편집할 수 없습니다.

이 글에서는 jQuery를 사용하여 양식의 입력 상자를 편집 불가능하게 만드는 방법을 소개합니다.

많은 애플리케이션에서 우리는 일반적으로 텍스트 입력을 받는 데 사용되는 기본 HTML 요소 중 하나인 입력 요소를 사용합니다. 어떤 경우에는 사용자가 입력 상자에서 편집하는 것을 방지하기 위해 일부 입력 상자를 읽기 전용 모드로 설정하려고 합니다. 이는 텍스트 콘텐츠가 데이터베이스나 API에 의해 생성되었거나 오용을 방지하도록 설정되었기 때문일 수 있습니다.

일반적으로 입력 상자를 읽기 전용 상태로 설정하려면 백엔드에서 작업하여 HTML 속성(예: 읽기 전용)의 출력을 제어해야 합니다. 하지만 어떤 경우에는 백엔드 코드에 접근할 수 없거나 HTML 속성을 쉽게 변경할 수 없는 경우가 있습니다. 이때 jQuery를 사용하면 이러한 상황을 처리할 수 있습니다.

다음은 jQuery를 사용하여 입력 상자를 읽기 전용 상태로 설정하는 방법을 보여주는 몇 가지 예입니다.

예 1: .prop 메서드 사용

jQuery의 .prop() 메서드는 속성을 가져오거나 설정하는 데 사용됩니다. 가치. .prop() 메서드를 사용하여 입력 상자를 읽기 전용 모드로 설정할 수 있습니다. 아래 코드는 이를 달성하기 위해 .prop() 메서드를 사용하는 방법을 보여줍니다.

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').prop('readonly', true);
});

이러한 방식으로 입력 상자는 읽기 전용 모드로 설정되고 사용자는 그 안의 텍스트를 편집할 수 없습니다. 입력 상자의 값을 수정해야 하는 경우 jQuery의 .val() 메서드만 사용하면 됩니다.

예제 2: .attr 메서드 사용

위의 예에서는 .prop() 메서드를 사용하여 입력 상자를 읽기 전용 모드로 설정하는 방법을 보여줍니다. 하지만 어떤 경우에는 prop() 메서드가 제대로 작동하지 않을 수도 있습니다. 예를 들어, 일부 jQuery 버전에서는 prop이 문서가 로드된 후에 존재하는 요소만 제어할 수 있으며 AJAX 또는 기타 방법을 통해 추가된 후속 요소에는 효과적이지 않을 수 있습니다. 이 시점에서 .prop() 메서드 대신 .attr() 메서드를 사용할 수 있습니다. 다음은 .attr() 메서드를 사용하는 샘플 코드입니다.

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

이 코드는 입력 상자를 읽기 전용 모드로 설정합니다. 입력 상자를 다시 편집할 수 있도록 RemoveAttre() 메서드를 사용하여 읽기 전용 속성을 삭제할 수 있습니다.

예제 3: CSS 사용

위 두 예의 방법은 요소의 속성 값을 직접 수정하는 것입니다. 구현 방법은 간단하지만 HTML의 순수성을 파괴할 수 있습니다. 요소 속성 값을 수정하지 않고 입력 상자를 편집할 수 없게 만들고 싶다면 CSS 스타일을 사용하여 제어할 수 있습니다. 특히 입력 요소에 대한 CSS 스타일을 설정하여 사용자 편집을 금지할 수 있습니다. 다음은 CSS를 사용한 샘플 코드입니다.

<!-- HTML -->
<input type="text" id="myInput" value="只读输入框">

<!-- CSS -->
input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

<!-- JavaScript & jQuery -->
$(document).ready(function() {
    $('#myInput').attr('readonly', 'readonly');
});

이 코드는 읽기 전용 속성이 있는 모든 입력 상자에 스타일을 추가하여 회색 배경을 갖게 하고 금지 기호를 표시하여 사용자가 편집할 수 없도록 합니다. 이 방법은 JavaScript에 의존하지 않으며 HTML 속성 값을 변경하지 않습니다. 입력 상자를 편집 가능하도록 재설정해야 하는 경우 CSS에서 input[readonly] 및 해당 규칙만 제거하면 됩니다.

공유 요약

응용 프로그램에서는 입력 상자를 읽기 전용 모드로 설정해야 하는 경우가 있습니다. jQuery를 사용하면 이를 쉽게 달성할 수 있어 사용자가 실수하는 것을 방지할 수 있습니다. .prop() 및 .attr() 메소드를 사용하여 요소 속성 값을 변경하거나 CSS 스타일을 사용하여 입력 상자가 편집 가능하지 않도록 제어할 수 있습니다. 또한 입력 요소의 비활성화된 속성을 true로 설정하거나 다양한 jQuery 플러그인을 사용하는 등 동일한 목적을 달성하기 위해 다른 방법을 사용할 수도 있습니다. 이 기사에 표시된 예제는 jQuery 구현 방법 중 하나일 뿐이며 독자는 실제 애플리케이션 요구 사항에 따라 선택할 수 있습니다.

위 내용은 jquery 입력은 편집할 수 없습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!