Php 在IE8中为JS动态创建的元素添加占位符

我有下面的代码来显示管理员创建、暂停帐户的表单

echo "<FORM name=\"admin\" action=\"\" enctype=\"multipart/form-data\">";
echo "<select onchange=\"ChangeType();\" name=\"action\" id=\"action\">";
echo "<option value=\"select\">--Select--</option>";
echo "<option value=\"create\">Create Account</option>";
echo "<option value=\"suspend\">Suspend Account</option>";
echo "</select><br><br>";
echo "<div id=\"data\">";
echo "</div>";
echo "<input type=\"button\" name=\"button\" onclick=\"AccountAction()\" value=\"Submit\">";
echo "<input type=\"reset\" id=\"reset\" value=\"Reset\" onclick=\"ResetForm();\">";
echo "</FORM>";

以及当用户调用ChangeType时在DOM中动态创建元素的javascript

function ChangeType()
{
    var type = document.getElementById("action").options[document.getElementById("action").selectedIndex].value;
    if(type=="select")
    {
        document.getElementById('data').innerHTML = "";
    }
    if(type=="create")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        document.getElementById('data').innerHTML += "<input id=\"password\" placeholder=\"Password\" type=\"password\" name=\"password\"><br><br>";
        return;
    }
    if(type=="suspend")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        return;
    }
}

代码运行良好，但是我无法获取动态创建的用户名和密码输入类型的占位符

我已经看过了

但这并没有帮助，因为占位符只有在我在文本区域内单击一次，然后单击外部时才会出现

你必须这样做：

在代码中：

为我工作：

HTML

Javascript

---

函数checkPlaceHolder警告div标记中的所有输入标记占位符属性。希望这能有所帮助。

为什么要标记这个jQuery？我想在jQuery中有一种方法可以做到这一点，所以jQuery的人可以提供一个有效的解决方案，在IE8中为JSL5中创建的动态元素添加占位符。找到html5特性的多边形填充的好地方通常是，请不要像那样滥用占位符：然后你必须使用jQuery因为它是独立于浏览器的。检查我的更新答案。问题是当我从下拉列表中选择选项时，它会显示输入元素，但占位符不可见。当我在输入框内部单击，然后在外部单击时，它是可见的，甚至我在JSFIDLE上也遇到了错误。在本地m/c上运行代码时，我看到了占位符。你在尝试哪个浏览器？占位符是html5的一个属性。它在IE10、FF和chrome中运行良好，但我希望它能在IE8上运行，因为我们正式支持IE8IE8，IE8不支持占位符。要做到这一点，您可能需要使用这个插件——然后您必须使用jquery，因为它独立于浏览器。检查我的更新答案。我已经尝试过使用jQuery代码，但仍然无法使用IE8@MotaChuha：由于IE8没有本机占位符支持，设置占位符属性在使用jQuery或不使用jQuery时都不会产生任何效果。

document.getElementById('data').setAttribute("placeholder", "placeholder value");

function ChangeType() {
var type = document.getElementById("action").options[document.getElementById("action").selectedIndex].value;
if (type == "select") {
    document.getElementById('data').innerHTML = "";
    document.getElementById('data').setAttribute("placeholder", "placeholder value");
}
if (type == "create") {
    document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
    document.getElementById('data').innerHTML += "<input id=\"password\" placeholder=\"Password\" type=\"password\" name=\"password\"><br><br>";
    document.getElementById('data').setAttribute("placeholder", "placeholder value");
    return;
}
if (type == "suspend") {
    document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
    document.getElementById('data').setAttribute("placeholder", "placeholder value");
    return;
}}

$("#data").attr("placeholder", "placeholder value");

<FORM name="admin" action="" enctype="multipart/form-data">
    <select onchange="ChangeType();" name="action" id="action">
    <option value="select">--Select--</option>
    <option value="create">Create Account</option>
    <option value="suspend">Suspend Account</option>
    </select><br><br>
    <div id="data"></div>
    <input type="button" name="button" onclick="AccountAction()" value="Submit">
    <input type="reset" id="reset" value="Reset" onclick="ResetForm();">
    <!--This button alerts all palceholder attributes for all input tags within the div-->
    <input type="button" name="button" onclick="checkPlaceHolder()" value="Check Placeholder Values">
</FORM>

function AccountAction(){}
function ResetForm(){}

function ChangeType() {
    var type = document.getElementById("action").options[document.getElementById("action").selectedIndex].value;
    if(type=="select")
    {
        document.getElementById('data').innerHTML = "";
    }
    if(type=="create")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        document.getElementById('data').innerHTML += "<input id=\"password\" placeholder=\"Password\" type=\"password\" name=\"password\"><br><br>";
        return;
    }
    if(type=="suspend")
    {
        document.getElementById('data').innerHTML = "<input id=\"username\" placeholder=\"Username\" type=\"text\" name=\"username\"><br><br>";
        return;
    }
}

function checkPlaceHolder() {
    $( '#data input' ).each(function(o) {
        alert('Placeholder : ' + $(this).attr('placeholder'));
    });
}