미리 작성된 내용이 Materialize에 겹쳐진 레이블

Question

내가하려는 것은 Materialize를 사용하는 양식을 작성하는 것입니다.하지만 실제로는 입력 된 자리 표시자를 겹치고 실제로 페이지에서 "수신하지"않은 내용이 작성됩니다. 웹에 나는 많은 사용자가이 문제 addind 입력의 레이블에 "활성"클래스를 고정 된 것으로 나타났습니다 때문에

$("label[for='firstname']").addClass("active"); 
document.getElementById("firstname").value = "John"; 

,하지만이 작동하지 않습니다 : 내가 사용 JS 코드는 다음과 같다 나를. 또한

, 내가 말하는 웹 페이지에 오류가

$(document).ready(function() { 
Materialize.updateTextFields(); 
    }); 

를 사용하려고 "catch되지 않은 오류 ReferenceError가 : 구체화가 정의되어 있지 않습니다."

이 문제를 해결할 다른 방법이 있습니까? Chrome 확장 프로그램을 사용하여 자동 완성 중이며 document.write로 스크립트를 삽입하여 html 페이지 콘텐츠를 수정할 수 없습니다.

편집 :

나는 또한 입력 필드에 수동으로 작성하는 경우, 입력의 클래스가

materialize-element-field ng-valid-pattern ng-valid-minlength ng-valid-maxlength active ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required 

클래스 레이블이되는

materialize-element-field ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength 

에서가는 것으로 나타났습니다 전혀 바뀌지 않았다. 입력 필드 전에 다음 DIV도있다

:

<div ng-class="['materialize-element', 
          { 
           'input-half left': true,         
           'materialize-textinput': true, 
           'materialize-password': false, 
           'materialize-textarea': false, 
           'materialize-select': false, 
           'materialize-number': false, 
           'materialize-checkbox': false, 
           'materialize-radio': false, 
           'materialize-block-radio': false, 
           'collapsed': !selectBoxExpanded['firstname'] &amp;&amp; false, 
           'expanded': selectBoxExpanded['first'] &amp;&amp; false, 
           'has-icon': false &amp;&amp; true, 
           'required': requiredField['ship.firstname'] || true, 
           'not-empty': !isModelEmpty(ship.firstname || form['ffirstname_46afgt3'].$$rawModelValue), 
           'valid': (isModelModified(form, 'firstname_46afgt3') &amp;&amp; form['firstname_46afgt3'].$valid) &amp;&amp; form['firstname_46afgt3'].$viewValue.length != 0, 
           'error': (isModelModified(form, 'firstname_46afgt3') &amp;&amp; form['firstname_46afgt3'].$invalid), 
           'disabled': false, 
           'has-counter': false 
          }]" ng-click="selectBoxExpanded['firstname']=!selectBoxExpanded['firstname']" ng-init="initField('ship', 'firstname', '', false)" class="materialize-element input-half left materialize-textinput required"> 

의 I 수동 입력에 텍스트를 추가 한 후 다음을 변경 위의 DIV의 클래스 :

materialize-element input-half left materialize-textinput required not-empty valid 

편집 2 :

입력란은 텍스트 앞에 다음과 같습니다.

<input class="materialize-element-field ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength" type="text" id="firstname" name="firstname_46afgt3" value="" maxlength="33" ng-pattern="/^[\u00C0-\u1FFF\u2C00-\uD7FF\u2019a-zA-Z\.\'\-\s]{1,}$/" ng-required="requiredField['ship.firstname'] || true" ng-model="ship.firstname" ng-init="validateField('firstname_46afgt3', true, 'W3sidHlwZSI6InJlcXVpcmVkIiwibGFiZWwiOiJmb3Jtcy5jaGVja291dC5kZWxpdmVyeS5tZXRhcGFjay5hZGRyZXNzLmZpcnN0bmFtZS5taXNzaW5nIiwiZGlzcGxheUxhYmVsIjoiSW5zZXJpc2NpIGlsIG5vbWUuIn0seyJ0eXBlIjoicGF0dGVybiIsImxhYmVsIjoiZm9ybXMuY2hlY2tvdXQuZGVsaXZlcnkubWV0YXBhY2suYWRkcmVzcy5maXJzdG5hbWUuaW52YWxpZCIsImRpc3BsYXlMYWJlbCI6IkNvbnRyb2xsYSBpbCBub21lLiJ9XQ==')" ng-keydown="ngKeyHandler($event)" ng-change="ngChangeHandler('firstname', 'firstname_46afgt3', false)" ng-trim="true" required="required"> 

그리고 내가 텍스트 작성 후 다음이 있습니다 : 내가 수동으로 편집하려고하면

<input class="materialize-element-field ng-valid-pattern ng-valid-minlength ng-valid-maxlength active ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" type="text" id="firstname" name="firstname_46afgt3" value="" maxlength="33" ng-pattern="/^[\u00C0-\u1FFF\u2C00-\uD7FF\u2019a-zA-Z\.\'\-\s]{1,}$/" ng-required="requiredField['ship.firstname'] || true" ng-model="ship.firstname" ng-init="validateField('firstname_46afgt3', true, 'W3sidHlwZSI6InJlcXVpcmVkIiwibGFiZWwiOiJmb3Jtcy5jaGVja291dC5kZWxpdmVyeS5tZXRhcGFjay5hZGRyZXNzLmZpcnN0bmFtZS5taXNzaW5nIiwiZGlzcGxheUxhYmVsIjoiSW5zZXJpc2NpIGlsIG5vbWUuIn0seyJ0eXBlIjoicGF0dGVybiIsImxhYmVsIjoiZm9ybXMuY2hlY2tvdXQuZGVsaXZlcnkubWV0YXBhY2suYWRkcmVzcy5maXJzdG5hbWUuaW52YWxpZCIsImRpc3BsYXlMYWJlbCI6IkNvbnRyb2xsYSBpbCBub21lLiJ9XQ==')" ng-keydown="ngKeyHandler($event)" ng-change="ngChangeHandler('firstname', 'firstname_46afgt3', false)" ng-trim="true" required="required"> 

입력 필드에 "값"태그가 전혀 감동하지 않을 것으로 보인다 및 Chrome 개발자 콘솔에서 자동 완성과 동일한 작업이 수행됩니다.

Answer 1

아, last_name example을 사용하면 입력이 어떻게 자리 표시자를 덮어 쓰는 것처럼 보일 수 있습니다. 실제로 자리 표시자가 아닙니다. 레이블이 입력 영역 내에 배치됩니다. 입력이 포커스를 받으면 레이블 위를 이동합니다. 포커스 (또는 수동으로 활성 클래스)를받지 않으면 레이블은 입력 필드 값이있는 공간과 동일하게 유지됩니다.

JS 오류의 경우 Materialize 스크립트가로드되지 않았습니다. 현재 페이지에서 콘솔을 열고 Materialize를 입력하면 정의되지 않은 객체 또는 객체가 반환됩니까? 정의되지 않은 경우 Materialize의 JS가 해당 페이지에 적용되지 않습니다.

개체를 반환하는 경우 구체화 스크립트가 실행되기 전에 스크립트가 실행되고 있는지 확인합니다.

편집 :

난 그냥 구체화가 대신 CSS 상태의 자바 스크립트를 통해 라벨에 "활성"클래스를 적용 것으로 나타났습니다. 그러면 Materialize 스크립트가 페이지에 있어야합니다. 현재 작업하고있는 페이지의 링크를 제공 할 수 있습니까?