<分区>
我想做的是填写一个使用 Materialize 的表单，但它发生的是书面内容只是与输入的占位符重叠，而不是实际从页面“接收”。 我使用的 JS 代码如下:
$("label[for='firstname']").addClass("active");
document.getElementById("firstname").value = "John";
因为在网络上我注意到许多用户解决了这个问题，将类“active”添加到输入的标签中，但这对我不起作用。
另外，当尝试使用
$(document).ready(function() {
Materialize.updateTextFields();
});
我在网页上收到一条错误消息，内容为“Uncaught ReferenceError: Materialize is not defined”。
还有其他方法可以解决这个问题吗？我正在使用 Chrome 扩展程序自动填充，但我无法通过使用 document.write 注入(inject)脚本来修改 html 页面内容。
编辑:
我还注意到，如果在输入字段中手动写入，输入的类来自
materialize-element-field ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required ng-valid-pattern ng-valid-minlength ng-valid-maxlength
到
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
类标签根本没有改变。
输入框前还有如下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'] && false,
'expanded': selectBoxExpanded['first'] && false,
'has-icon': false && true,
'required': requiredField['ship.firstname'] || true,
'not-empty': !isModelEmpty(ship.firstname || form['ffirstname_46afgt3'].$$rawModelValue),
'valid': (isModelModified(form, 'firstname_46afgt3') && form['firstname_46afgt3'].$valid) && form['firstname_46afgt3'].$viewValue.length != 0,
'error': (isModelModified(form, 'firstname_46afgt3') && 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">
在我手动在输入中添加文本后，上面的 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 开发控制台手动编辑它，就会发生与自动填充相同的事情。