javascript - 在Materialize中标记重叠的预填充内容

This question already has answers here:

Using page's angular JS in chrome extension

(3个答案)


4年前关闭。




我想做的是填写一个使用Materialize的表单，但是正在发生的是书面内容只是与输入的占位符重叠，而实际上并未从页面“接收”。
我正在使用的JS代码如下:

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

因为在网络上，我注意到许多用户已解决此问题，所以在输入的标签上添加了“ Activity ”类，但这对我不起作用。

另外，在尝试使用时

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

我在网页上看到“未捕获的ReferenceError:未定义实现”的错误。

还有另一种方法可以解决此问题？我正在使用Chrome扩展程序进行自动填充，但是无法通过注入(inject)带有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">

似乎根本没有触摸输入字段中的“值”标签，如果我尝试从Chrome开发者控制台手动对其进行编辑，则会发生与自动填充相同的情况。

最佳答案

啊，如果我使用last_name example，我可以看到输入看起来像覆盖占位符。它实际上不是占位符。它的标签位于输入区域内。当输入获得焦点时，它将标签移到上方。如果没有获得焦点(或手动获得 Activity 类)，则标签将保留在输入字段值所在的同一空间中。
对于您的JS错误，这表示未加载Materialize脚本。如果在您所在的页面上打开控制台并键入Materialize，它返回未定义还是对象？如果未定义，则不会将Materialize的JS应用于该页面。
如果它返回一个对象，我将在执行Materialize脚本之前检查是否有可能正在执行您的脚本。
编辑:
我只是注意到Materialize通过javascript而不是CSS状态将“active”类应用于标签。这表明Materialize脚本必须在页面上。您可以提供您正在处理的页面的链接吗？

关于javascript - 在Materialize中标记重叠的预填充内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40329956/