>source

필드에 대한 '플로팅 레이블'효과를 만들려고합니다. 그러나 HTML code는 CSS 조합기를 사용할 수있는 방법이 없으므로 CSS만을 사용하여 성취하지 못하게하는 방식으로 구성되어 있기 때문에 어려움을 겪고 있습니다 (>,+,~) 그리고 HTML code를 변경할 수있는 기능이 없습니다.

내 code :

label {display: block; position: absolute; margin: 15px 0 0 12px; color: #606060; font-family: "Arial";}
input {display: block; padding: 15px 12px; border: 1px solid #bbb; border-radius: 5px; width: 300px;}

그러나 나는 그것을 줄 수있는 경우 가능할 것이라고 믿습니다.컨테이너필드의 입력 /상태를 기반으로 한 CSS 클래스입니다. 나는 그에게주고 싶다컨테이너그만큼디스플레이 -부동 라벨수업의 가치가있는 경우입력0보다 크다 (> 0). 그리고 어쩌면입력초점을 맞추고 있습니다. JavaScript에서 가능합니다.

나는 시도한 것입니다 :

$(document).ready(function() {
  var formFields= $('.container');
  formFields.each(function() {
    var field= $(this);
    var input= field.find('input');
    var label= field.find('label');
    function checkInput() {
      var valueLength= input.val().length;
      if (valueLength > 0 ) {
        label.addClass('display-floating-label')
      } else {
            label.removeClass('display-floating-label')
      }
    }
    input.change(function() {
      checkInput()
    })
  });
});

그러나 그것은 작동하지 않았습니다. 나는 자바 스크립트에 익숙하지 않으므로 누군가가 나를 도울 수 있다면 정말로 감사 할 것입니다.

* HTML code의 구조를 변경할 수 없으므로, 나는 내가 가진 것만으로 일할 수 있습니다.

JavaScript를 사용하여 CSS 전용 솔루션을 문제에 해결할 수있는 DOM을 재정렬하기 위해 멈추는 것은 무엇입니까?

David says reinstate Monica2021-04-21 04:34:14

@David, 저는 JavaScript를 사용하여 DOM을 재정렬 할 수 있습니다. 당신이 이것을 어떻게 달성 할 수 있는지에 대한 답을 창출 할 수 있습니까?

JOKKER2021-04-21 04:34:14
  • 이전 YouTube 개발자 정책의 선명도 : E. yt 데이터 및 콘텐츠 처리 -2. 데이터 집계 -a
  • 다음 excel : 이름이 지정된 범위를 사용할 때이 결과와 함수가 단일 값으로 축소되는 이유는 무엇입니까?