[英]Adding placeholder to dynamically created elements by JS in IE8
I have the below code to show a form for admin to create, suspend accounts 我有以下代码来显示管理员创建,暂停帐户的表单
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>";
and the javascript to dynamically create elements within the DOM when the user calls ChangeType() 以及当用户调用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;
}
}
the code works fine however i cannot get the placeholder for the dynamically created username and password input types 代码工作正常,但是我无法获得动态创建的用户名和密码输入类型的占位符
i have already looked at Adding jQuery placeholders to dynamically created form elements 我已经看过将jQuery占位符添加到动态创建的表单元素中
but it doesn't help as the placeholders only appear when i click within the textarea once and then click outside. 但这无济于事,因为占位符仅在我在文本区域内单击一次然后在外部单击时出现。
You have to do like this : 您必须这样做:
document.getElementById('data').setAttribute("placeholder", "placeholder value");
In your code : 在您的代码中:
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;
}}
Using Jquery (browser compatible solution) : 使用Jquery(浏览器兼容解决方案):
$("#data").attr("placeholder", "placeholder value");
Works for me: 为我工作:
HTML 的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 Java脚本
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'));
});
}
The function checkPlaceHolder
alerts all the input tag placeholder attributes within the div
tag. 函数checkPlaceHolder
警告div
标签内的所有输入标签占位符属性。 Hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.