我的输入占位符属性替代代码是否可以正常工作，例如IE？答案

【问题标题】：Will my code for input placeholder attribute alternative properly work in e.g. IE?我的输入占位符属性替代代码是否可以正常工作，例如IE？
【发布时间】：2021-05-12 21:32:46
【问题描述】：

我创建了以下 Javascript 作为 browsers that don't support the input placeholder attribute 的输入占位符属性替代项，就像旧版本的 Internet Explorer：

function placeholder_check(value1) {

if(document.getElementById(value1).getAttribute('value') == null || document.getElementById(value1).getAttribute('value') == '') {
    document.getElementById(value1).setAttribute('value', '');
}

if(document.createElement('input').placeholder == undefined) {

if(document.getElementById(value1).getAttribute('value') == '') {
    document.getElementById(value1).setAttribute('value', document.getElementById(value1).getAttribute('placeholder'));
}

}

}

此代码会将输入的值设置为占位符值。但仅当浏览器不支持占位符属性时。如果支持，则将使用占位符属性。此代码也只会在未设置 value 属性时才会执行。

这很容易实现，因为您只需要为每个输入指定一个特定的 id，并且只需要一小段 Javascript 即可调用这样的函数：onmouseover="placeholder_check(this.id);"，例如：

<input id="input1" placeholder="plaseholder 1" onmouseover="placeholder_check(this.id);">

我稍微测试了这段代码，它似乎可以工作。由于我对 Javascript 不是很熟悉，我想知道我是否做对了所有事情？或者，有什么我应该改进的吗？或者，一些无法在某些浏览器上运行的意外？

【问题讨论】：

（你有一个适当的标签来解释输入字段的含义吗？否则，占位符被认为是有害的，并且会创建糟糕的 UI/UX 开头 - medium.theuxblog.com/…，medium.com/nextux/alternatives-to-placeholder-text-13f430abc56f，@987654324 @)

标签： javascript html internet-explorer input placeholder

【解决方案1】：

您可以使用 onload 事件加载该函数

<head>
<script>
function myFunction() {
  alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>

【讨论】：

但是如何获取每个输入的 id 呢？
你可以像这篇文章中那样做一个循环-stackoverflow.com/a/2981433/9427950 或者你可以硬编码它。
这样的循环是否还有纯Javascript解决方案？
var elements = document.querySelectorAll("#my-form input[type=text]") for (var i = 0, element; element = elements[i++];) { if (element. value === "") console.log("这是一个空的文本字段") }

【解决方案2】：

对它感兴趣的人，这里是工作代码：

<!DOCTYPE html>
<html>
<head>
<script>
function placeholder_check(value1) {

if(document.getElementById(value1).getAttribute('value') == null || document.getElementById(value1).getAttribute('value') == '') {
    document.getElementById(value1).setAttribute('value', '');
}

if(document.createElement('input').placeholder !== undefined) {

if(document.getElementById(value1).getAttribute('value') == '') {
    document.getElementById(value1).setAttribute('value', document.getElementById(value1).getAttribute('placeholder'));
}

}

}

function placeholder_check_start() {
var elements = document.querySelectorAll("form input");

for (var i = 0, element; element = elements[i++];) {

if(element.id != null && element.id != '') {
    placeholder_check(element.id);
}

}
}
</script>
</head>
<body onload="placeholder_check_start();">

<form>
<input id="fff" placeholder="Input 1">
<input id="lll" placeholder="Input 2">
<input id="uuu" placeholder="Input 3">
</form>

</body>
</html>

页面加载后，这将自动循环考虑表单中的所有输入字段并将值设置为占位符文本，但前提是浏览器不支持输入占位符属性并且该值尚未设置。

【讨论】：