当前位置 博文首页 > 【孟子E章】:2011年终总结:为了娜娜的微笑
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
Page.MetaKeywords = "孟子E章";
Page.MetaDescription = "http://dotnet.aspx.cc";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1">
请输入关键字:<input id="keywords" /><br />
请输入其描述:<input id="description" /><br />
<input type="button" value="得到输入的关键字" οnclick="alert(document.getElementById('keywords').value)" />
<input type="button" value="得到输入的描述" οnclick="alert(document.getElementById('description').value)" />
</form>
</body>
</html>
上面的代码有问题吗?按道理说,不应该出现问题。但是,却有人遇到了问题,该用户问的是使用document.getElementById('keywords').value为何得不到<input id="keywords" />的?当时他的贴的代码并不全,所以,很难说明是什么原因。经过分析,原来,他页面的前面加了<meta name="keywords">导致name和id的不能正确的区分。IE浏览器的一个Bug就是不区分ID和Name属性,就连meta里面的name也不放过。
<meta name="description" content="http://dotnet.aspx.cc" />
<meta name="keywords" content="孟子E章" />
所以,一个好的习惯就是不要使用有可能是关键字的标识符。当我们出现问题的时候,也应该想想,如果keywords换成 UserKeywords试试能否得到,就可以很快的解决问题了。
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title></title>
<script type="text/javascript">
function checkForm(oF) {
if (oF.UserName.value == "") {
alert("请输入用户名。")
}
else {
//ajax提交
}
}
</script>
</head>
<body>
<form action="/SaveData" method="post">
<input type="text" name="UserName" value="net_lover" />
<button οnclick="checkForm(this.form)">保存数据</button>
</form>
</body>
</html>
代码执行的结果是,在数据库中老是同时添加2条相同的记录,按照以前IE的做法,这样写是没有任何问题的,<button>就相当于<input type="button">,button的默认类型是button。但是从IE8之后,这种默认的行为改变了,button的默认类型变成了submit,所以,上面的代码其实是提交了2次。MSDN上对这种行为的改变也做了很多的解释,http://msdn.microsoft.com/en-us/library/ms535211%28v=vs.85%29.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function changebg() {
document.getElementById("bg").style.backgroundImage = "url(http://dotnet.aspx.cc/Images/logoSite.gif)";
}
function changebg2() {
document.getElementById("bg2").style.backgroundImage = "url(http://dotnet.aspx.cc/Images/logoSite.gif)";
}
</script>
</head>
<body>
<div id="bg" style="height:60px;background:url(http://dotnet.aspx.cc/Images/meng.gif)"></div>
<img id="changebg" src="http://dotnet.aspx.cc/Images/logoSite.gif" alt="" /><br />
<input type="button" value="改变背景1" οnclick="changebg()" />
<div id="bg2" style="height:60px;background:url(http://dotnet.aspx.cc/Images/meng.gif)"></div>
<div id="changebg2">测试</div>
<input type="button" value="改变背景2" οnclick="changebg2()" />
</body>
</html>
在Firefox、Chrome、Oprea中,上面的代码“改变背景1”按钮是无法改变背景的,会提示 changebg is not a function ,但是“改变背景2”则是可以的,这个问题比较奇怪,出现问题的原因是函数定义和id标识符名称相同。但更奇怪的是,为何img的id和div的id都与函数名称相同,为何执行的行为却不一样?当然,解决问题的方法很简单,就是改一下名字就可以了。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (Request.HttpMethod.Equals("POST"))
{
int RowCount = Int32.Parse(Request.Form["RowCount"]);
for (int i = 0; i < RowCount; i++)
{
Response.Write("<li>你输入了:" + Request.Form["txt" + i]);
}
}
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
var count = 1;
function addRow() {
oTable = document.getElementById("table1");
oRow1 = oTable.insertRow(oTable.rows.length);
oCell1 = oRow1.insertCell(0);
oCell1.innerHTML = "输入名称:";
oCell2 = oRow1.insertCell(1);
oCell2.innerHTML = "<input name='txt" + count + "'/>";
count++;
document.forms[0].RowCount.value = count;
}
</script>
</head>
<body>
<table>
<tbody>
<form id="form1" runat="server">
<input type="hidden" name="RowCount" value="1" />
<tr>
<td>
<table border="1" id="table1">
<tr>
<td>输入名称:</td><td><input name="txt0" /></td>
</tr>
</table>
</td>
</tr>
</form>
</tbody>
</table>
<input type="button" value="添加" οnclick="addRow()" />
<input type="button" value="提交" οnclick="document.forms[0].submit()" />
</body>
</html>
上面的代码,在IE执行,可以正确得到所输入的内容,但是在非IE中,只能得到txt0的内容。这个问题也确实比较奇怪的,按理说,js生成的和原来的html应该是相同的,但是在非IE中,确是无法得到这些输入的内容的。当然,解决方法很简单,就是把form移到table之外即可解决。