Question

我有以下代码显示管理员创建，暂停帐户的表单

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>";

和javascript在用户调用ChangeType（）

时动态创建DOM中的元素

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;
    }
}

代码工作正常但是我无法获得动态创建的用户名和密码输入类型的占位符

我已经看过了 Adding jQuery placeholders to dynamically created form elements

但它没有帮助，因为只有当我在textarea中点击一次然后点击外面时才会出现占位符。

Answer 1

你必须这样做：

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;
}}

使用Jquery（浏览器兼容的解决方案）：

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

Answer 2

适合我：

<强> HTML

<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>

<强>的Javascript

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'));
    });
}

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

在IE8中通过JS向动态创建的元素添加占位符

2 个答案: