>  기사  >  웹 프론트엔드  >  CSS 입력을 편집할 수 없다는 것은 무엇을 의미합니까?

CSS 입력을 편집할 수 없다는 것은 무엇을 의미합니까?

PHPz
PHPz원래의
2023-04-24 09:09:561058검색

프런트 엔드 개발 프로세스에서 입력 요소는 가장 일반적으로 사용되는 양식 컨트롤 중 하나입니다. 어떤 특수한 경우에는 사용자가 입력 요소를 수정하지 못하도록 제한해야 할 경우가 있습니다. 이때 일반적으로 이러한 요구 사항을 충족하기 위해 입력 요소의 CSS 속성을 설정하는 것을 고려하지만 실제로는 실현 가능한 솔루션이 아닙니다.

CSS에는 실제로 disabledreadonly 속성과 같이 입력 요소의 동작과 스타일을 제어하는 ​​데 사용할 수 있는 몇 가지 관련 속성이 있습니다. 그러나 이러한 속성은 본질적으로 입력 요소의 CSS 속성을 수정하는 것이 아니라 금지된 효과 또는 읽기 전용 효과를 얻기 위해 허용된 상호 작용 방법을 변경하는 것입니다. disabledreadonly 属性。但这些属性本质上并不是修改 input 元素的CSS 属性,而是改变其允许的交互方式,达到禁止或只读的效果。

我们常常会尝试使用 CSS 属性来实现 input 不可编辑的需求,比如:

input {
  pointer-events: none;
  user-select: none;
  color: gray;
  background-color: #fafafa;
}

这样的 CSS 代码看起来很直接,但实际上却无效,因为 CSS 样式不能直接控制 input 元素中的值。无论你怎么设置,使用 input 元素的 value 属性都可以在 JavaScript 中被修改。

那么,为什么不能直接在 CSS 中修改 input 元素的样式和值?这和 input 元素的特性和用途有关。

首先, input 元素的值应该是由用户自主输入或从其他来源获取,而程序员不应该因为自己的需求而强行修改它。因此,只能通过设置 input 的 disabledreadonly

우리는 종종 다음과 같이 입력을 편집할 수 없다는 요구 사항을 충족하기 위해 CSS 속성을 사용하려고 시도합니다.

<input type="text" id="myInput" disabled>
이러한 CSS 코드는 매우 간단해 보이지만 CSS 스타일은 입력 요소의 값을 직접 제어할 수 없기 때문에 실제로는 비효율적입니다. . 어떻게 설정하든 입력 요소의 value 속성을 ​​사용하여 JavaScript에서 수정할 수 있습니다.
  1. 그렇다면 CSS에서 입력 요소의 스타일과 값을 직접 수정할 수 없는 이유는 무엇일까요? 이는 입력 요소의 특성 및 목적과 관련이 있습니다.
  2. 우선, 입력 요소의 값은 사용자가 독립적으로 입력하거나 다른 소스에서 얻어야 하며, 프로그래머는 자신의 필요에 따라 이를 강제로 수정해서는 안 됩니다. 따라서 입력의 disabled 또는 readonly 속성을 ​​설정해야만 해당 값이 수정되지 않도록 할 수 있습니다.
  3. 동시에 입력 요소에는 설계 초기부터 고유한 의미가 부여되었습니다. 웹 페이지에서 입력은 사용자 입력 데이터를 얻는 데 사용되는 컨트롤입니다. 입력 데이터는 처리를 위해 백그라운드 서버로 전송됩니다. 프로그래머가 입력의 스타일과 값을 직접 제어할 수 있는 경우 다음과 같은 예측할 수 없는 위험이 발생할 수 있습니다.

악성 프로그램은 JavaScript 또는 브라우저 확장 프로그램을 사용하여 입력 값을 변조하여 부적절한 제출물을 제출할 수 있습니다.

    악성 웹사이트 공격자는 CSS 공격을 사용하여 입력 데이터를 숨기고 사용자 정보를 속일 수 있습니다.
  1. 유지 관리의 어려움: 스타일과 값이 동시에 수정 제한 대상이 됩니다. 이러한 입력 요소를 유지하는 것은 매우 어렵습니다.

따라서 기본적으로 입력 요소의 값을 직접 수정할 수는 없습니다. 그러나 필요한 경우에는 코드를 통해 편집할 수 없는 입력 상태를 얻을 수 있습니다. 다음은 몇 가지 일반적인 구현 방법입니다.
  1. disable 속성 사용

disable 속성은 입력 컨트롤 자체에 의해 소유됩니다. 이를 설정하면 입력 요소가 회색으로 변하고 수정할 수 없습니다. 이는 사용할 수 없는 컨트롤이 클릭 및 키보드 입력을 포함한 상호 작용 이벤트에 응답하지 않기 때문입니다. 이는 매우 안전하고 구현하기 쉬운 방법입니다.
    <input type="text" id="myInput" readonly>
  1. 읽기 전용 속성을 사용하세요

읽기 전용 속성은 입력 컨트롤 자체가 갖는 또 다른 속성입니다. 비활성화된 속성과 비교할 때 읽기 전용은 입력 요소를 읽기 전용으로 만들고 모양을 변경하지 않습니다. 즉, CSS를 사용하여 입력 요소의 스타일을 수정할 수 있지만 해당 값은 수정할 수 없습니다. 그러나 이 속성은 사용자에게만 영향을 미치며 JavaScript 또는 백엔드 코드를 사용하여 값을 수정할 수 있습니다.

<input type="text" id="myInput" onkeyup="storeInputValue(this)" >

<script>
  function storeInputValue(input) {
    input.setAttribute('value', input.value);
    input.setAttribute('disabled', 'disabled');
  }
</script>

JavaScript를 이용한 모니터링

마지막 방법은 JavaScript를 이용해 입력 요소의 값이 수정되는 것을 방지하는 것입니다. 사용자가 입력한 후 JavaScript를 사용하여 입력 값을 저장하고 사용자가 다시 클릭하더라도 입력 요소가 수정되지 않도록 입력 요소를 비활성화할 수 있습니다. 🎜rrreee🎜이 경우 입력 요소는 값을 입력한 직후 사용할 수 없게 되며 사용자는 해당 값을 다시 수정할 수 없습니다. 그러나 이것이 완벽한 해결책은 아니라는 점에 유의해야 합니다. 🎜🎜요약🎜🎜위의 소개를 통해 CSS 속성을 사용하여 입력 요소의 값을 편집할 수 없도록 제어하는 ​​것이 유효하지 않음을 알 수 있습니다. 입력 컨트롤 자체의 일부 속성을 설정하거나 JavaScript를 사용하여 입력을 모니터링하면 편집 불가능한 효과를 얻을 수 있습니다. 하지만 입력 요소는 설계 초기부터 매우 중요한 의미와 기능을 갖고 있으며, 이를 과도하게 제어하면 예상치 못한 부정적인 영향을 미칠 수 있으므로 이는 주의해서 수행해야 합니다. 🎜

위 내용은 CSS 입력을 편집할 수 없다는 것은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.