像Google广告一样的示例

作者：chilleen 来源：ITPOW 日期：2006-1-16

来源：ITPOW（www.itpow.com）

在注册 Google 广告时，有一个步骤具有即时示例的效果，只是在文本框中输入值，示例就会立刻显示出来。下面实现类似功能。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>标题</title>
<style type="text/css">
#demo
{
    padding:5px;
    width:100px;
    border:1px solid #003366;
}
</style>
</head>

<body>

<div>
<a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a>
<hr>
</div>

<div id="demo">
  <div id="title"></div>
  <div id="remarks"></div>
  <div id="address"></div>
</div>

<form id="inputForm">
  <div>标题：<input type="text" name="title"></div>
  <div>备注：<input type="text" name="remarks"></div>
  <div>地址：<input type="text" name="address"></div>
</form>

<script type="text/javascript" language="javascript">
<!--
var inputForm = document.getElementById("inputForm");
var orgnTitle = "这里是标题";
var orgnRemarks = "这里是备注";
var orgnAddress = "这里是地址";

function DemoIt()
{
    var title = inputForm.title.value;
    var remarks = inputForm.remarks.value;
    var address = inputForm.address.value;
    title = (title!="")?title:orgnTitle;
    remarks = (remarks!="")?remarks:orgnRemarks;
    address = (address!="")?address:orgnAddress;
    
    document.getElementById("title").innerText = title;
    document.getElementById("remarks").innerText = remarks;
    document.getElementById("address").innerText = address;
}

DemoIt();
inputForm.title.onpropertychange = DemoIt;
inputForm.remarks.onpropertychange = DemoIt;
inputForm.address.onpropertychange = DemoIt;
//-->
</script>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上述代码不能在 Netscape 和 FireFox 中工作，原因是 Netscape 和 FireFox 都不支持 innerText 和 onpropertychange，用下面的代码解决。注意<div id="title">　</div>之间有个空格了噢。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>标题</title>
<style type="text/css">
#demo
{
    padding:5px;
    width:100px;
    border:1px solid #003366;
}
</style>
</head>

<body>

<div>
<a href="http://www.itpow.com/" target="_blank">ITPOW www.itpow.com 专业探讨【ASP、JavaScript、XHTML+CSS、SQL Server】</a>
<hr>
</div>

<div id="demo">
  <div id="title">　</div>
  <div id="remarks">　</div>
  <div id="address">　</div>
</div>

<form id="inputForm">
  <div>标题：<input type="text" name="title"></div>
  <div>备注：<input type="text" name="remarks"></div>
  <div>地址：<input type="text" name="address"></div>
</form>

<script type="text/javascript" language="javascript">
<!--
var inputForm = document.getElementById("inputForm");
var orgnTitle = "这里是标题";
var orgnRemarks = "这里是备注";
var orgnAddress = "这里是地址";

function DemoIt()
{
    var title = inputForm.title.value;
    var remarks = inputForm.remarks.value;
    var address = inputForm.address.value;
    title = (title!="")?title:orgnTitle;
    remarks = (remarks!="")?remarks:orgnRemarks;
    address = (address!="")?address:orgnAddress;
    
    document.getElementById("title").firstChild.nodeValue = title;
    document.getElementById("remarks").firstChild.nodeValue = remarks;
    document.getElementById("address").firstChild.nodeValue = address;
}

setInterval("DemoIt()", 100);
//-->
</script>

</body>

</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

电邮：cftea@126.com