Question

我要做的是填写一个使用Materialise的表单，但它发生的是刚刚与输入的占位符重叠但未实际从页面“接收”的书面内容。我正在使用的JS代码如下：

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

因为在网络上我注意到许多用户修复了这个问题，所以将“活动”类添加到输入的标签中，但这对我不起作用。

此外，在尝试使用

时

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

我在网页上收到错误消息“未捕获的ReferenceError：未定义Materialise”。

还有其他方法可以解决此问题吗？我使用Chrome扩展程序进行自动填充，我无法通过使用document.write注入脚本来修改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'] &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">

在输入中手动添加文本后，上面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">

似乎根本没有触及输入字段中的“value”标记，如果我尝试从Chrome Dev控制台手动编辑它，则会发生与自动填充相同的事情。

Answer 1

啊，如果我使用last_name example，我可以看到输入看起来如何覆盖占位符。它实际上并不是占位符。它的标签位于输入区域内。当输入获得焦点时，它会移动上面的标签。如果没有获得焦点（或手动激活类），标签将保留在输入字段值所在的同一空间中。

对于您的JS错误，即表示未加载Materialize脚本。如果您在当前页面上打开控制台并输入Materialize，它是否返回undefined或对象？如果未定义，则Materialise的JS不会应用于该页面。

如果它返回一个对象，我会在执行Materialize脚本之前检查脚本是否可能正在执行。

编辑：

我刚注意到Materialise通过javascript而不仅仅是css状态将“active”类应用于标签。这表明Materialise脚本必须在页面上。你能提供你正在处理的页面的链接吗？

标签重叠Materialise中的预填充内容

1 个答案: