2

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

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

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

我已经看过 将 jQuery 占位符添加到动态创建的表单元素

但这无济于事，因为占位符仅在我在文本区域内单击一次然后在外部单击时才会出现。

4

2 回答 2

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");
于 2013-05-28T05:34:33.367 回答
0

为我工作：

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。希望这可以帮助。

于 2013-05-28T05:44:30.420 回答