87,994
社区成员
发帖
与我相关
我的任务
分享没有使用placeholder属性，value值是怎么来的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Jay Skript And The Domsters: Tour dates</title>
<link rel="stylesheet" media="screen" href="styles/basic.css" />
</head>
<body>
<header>
<img src="images/logo.JPG" alt="Jay Skript and the Domsters" />
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="live.html">Live</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<article>
<h1>Contact the band</h1>
<form action="submit.html" method="post">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholderx="Your name" required="required">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholderx="Your email address" required="required">
</p>
<p>
<label for="message">Message:</label>
<textarea name="message" id="message" cols="45" rows="7" required="required" placeholderx="Write your message here."></textarea>
</p>
<input type="submit" value="Send">
</fieldset>
</form>
</article>
<script type="text/javascript">
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != 'function'){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
}
//如果浏览器没有为label元素添加默认行为，可手动写入foucusLables函数
function focusLables(){
var articles=document.getElementsByTagName("article");
if(articles.length==0)return false;
var forms=articles[0].getElementsByTagName("form");
if(forms.length==0)return false;
var labels=forms[0].getElementsByTagName("label");
for(var i=0;i<labels.length;i++){
if(!labels[i].getAttribute("for"))continue;
labels[i].onclick=function(){
var id=this.getAttribute("for");
//这了不写continue，是因为onclick事件中没有循环语句，因此不能使用continue
//故直接return false;
if(!document.getElementById(id))return false;
var element=document.getElementById(id);
element.focus();
}
}
}
addLoadEvent(focusLables);
// resetFields为了兼容低版本不支持placeholderx的浏览器
function resetFields(whichform){
//如果placeholderx浏览器支持，则直接return，不再需要执行下面的代码
//if(Modernizr.input.placeholderx)return;
for(var i=0;i<whichform.elements.length;i++){
var element=whichform.elements[i];
if(element.type=="submit")continue;
var check=element.placeholderx||element.getAttribute("placeholderx");
if(!check)continue;
element.onfocus=function(){
var text=this.placeholderx||this.getAttribute("placeholderx");
if(this.value==text){
this.value="";
this.className="";
}
}
element.onblur=function(){
if(this.value==""){
this.value=this.placeholderx||this.getAttribute("placeholderx");
this.className="placeholderx";
}
}
element.onblur();
}
}
function prepareForms(){
for(var i=0;i<document.forms.length;i++){
var thisform=document.forms[i];
resetFields(thisform);
}
}
addLoadEvent(prepareForms);
</script>
</body>
</html> <input type="email" id="email" name="email" placeholderx="Your email address" required="required">
得到document.forms[0].elements[2].value的返回值是Your email address。
可是使用chrome自带的placeholder属性，即
<input type="email" id="email" name="email" placeholder="Your email address" required="required">document.forms[0].elements[2].value的返回值是“”。
我想问一下，这个value的值是从哪里得到的？我并没有设置value，而且在文本框内也没有输入任何的字符。那这个value是从何而来，不太明白。
if(this.value==text){
this.value="";
this.className="";
}所以就不明白这行代码是如何通过判断的
...全文
请发表友善的回复…
发表回复
兜里有米 2017-07-17
- 打赏
- 举报
啊啊啊啊啊。。。。。
明白了。。。
。。。。
兜里有米 2017-07-17
- 打赏
- 举报
？？什么意思啊
兜里有米 2017-07-17
- 打赏
- 举报
我说的是placeholderx 不是placeholder。
placeholder起占位作用，和value没关系。
placeholderx是自定义属性
<input type="email" id="email" name="email" placeholderx="Your email address" required="required">
孟子E章 2017-07-17
- 打赏
- 举报
this.value=this.placeholderx||this.getAttribute("placeholderx");
似梦飞花 2017-07-17
- 打赏
- 举报
两个完全没关系的属性啊 placeholder不是value 也不会被提交给后端
