浏览器自动填充事件

Question

我正在开发一个网站，其中包含登录表单。我知道人们可以在他们的网络浏览器中保存他们的用户名和密码。

我需要显示/隐藏一个标签（）。如果字段为空，则标签必须出现；如果字段中有任何值，则标签必须隐藏，但是这无法与浏览器自动完成一起使用。有什么方法可以跟踪这个问题吗？

我尝试过以下代码：

jQuery.change();

但是那样行不通。

除了关闭自动完成，我还能做些什么吗？

- nivanka

Answer 1

在这里使用占位符属性是常规做法，用于相关的输入元素：

<input type="text" placeholder="username">

当输入框中没有文字时，用户名将显示在输入框内，否则将被隐藏。如果您正在使用此功能，则应该使用类似于Modernizr的工具来检测支持，否则创建一个普通的文本标签。

- aviraldg

---

它适用于大多数现代浏览器，正如您所看到的，即使SO也在其搜索字段（页面右上角）中使用它。 - aviraldg

Answer 2

你必须手动触发更改事件：

$("#username")
.change(function () {
    // do stuff on change (check for default)
})
.trigger("change");

如果您只想切换默认文本（或使用Modernizr的占位符属性，如aviraldg所建议的），可以使用一些水印库。

- LZW

Answer 3

这很简单。
我在我的网站文本字段中使用它。

这段代码是用Javascript编写的。

1. 创建一个名称为“comform”且id =“comform”的<form>（您稍后可以更改此信息；仅供参考）。
2. 创建一个带有name和id =“Message”的<input type =“text”>（您稍后可以更改此信息；仅供参考）。
3. 创建一个<div>，id =“ifsend”（您稍后可以更改此信息；仅供参考）。

还要创建一个变量来存储长度。 var numbering（您稍后可以更改此信息；仅供参考）。

function counter() {
    var numbering;
    numbering = document.forms["comform"]["Message"].value.length;
    if (numbering == 0) {
        label();
    }
    if (numbering != 0) {
        document.getElementById('ifsend').innerHTML="";
    }
}

function label() {
    document.getElementById('ifsend').innerHTML="Your form value is empty";
}

- Marc Brown

---

这难道不是有帮助的吗？你没有要求特定的编程语言，只是想要计算一个字段中的项目数，对吧？ - Marc Brown