input内文字点击消失弹出层，可以写表单

最新推荐文章于 2024-08-23 11:28:52 发布

weixin_34032621

最新推荐文章于 2024-08-23 11:28:52 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qiuyang1/p/4283979.html

本文介绍了一个使用HTML和JavaScript实现的表单交互案例，包括输入框提示信息、弹窗显示及隐藏等功能。通过具体代码展示了如何利用JavaScript操作DOM元素，实现网页中表单与用户的互动。

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>设计师内容页</title>  
</head>  
<body>  
  
<input name="" type="text" onfocus="if(this.value=='请输入邮箱地址，以便收到编辑的回复') {this.value='';}" onblur="if(this.value=='') {this.value='请输入邮箱地址，以便收到编辑的回复';}" value="请输入邮箱地址，以便收到编辑的回复" />  
<textarea name="" rows="" onfocus="if(value=='如果您遇到任何有关服装的问题都可以在此提问') {value=''}" onblur="if(value=='') {value='如果您遇到任何有关服装的问题都可以在此提问'}">如果您遇到任何有关服装的问题都可以在此提问</textarea>  
  
</body>  
</html>

弹出层，可以写表单

<link href="http://www.dazhongw.com/css/css.css" rel="stylesheet" type="text/css" />  
<SCRIPT src="http://www.dazhongw.com/js/jquery.min.js"></SCRIPT>  
  
<script language="javascript" type="text/javascript">  
function showDiv(){  
$("#zxgs").attr('value',$("#gsmc").text());  
$("#ly").attr('value',$("#xxly").text());  
document.getElementById('popDiv').style.display='block';  
document.getElementById('popIframe').style.display='block';  
document.getElementById('bg').style.display='block';  
}  
function closeDiv(){  
document.getElementById('popDiv').style.display='none';  
document.getElementById('bg').style.display='none';  
document.getElementById('popIframe').style.display='none';  
}  
</script>  
  
<script language="javascript">  
function checkkey(){  
    if(form2.realname.value=='请填写您的真实姓名')  
    {  
        alert("请填写您的真实姓名!");  
        form2.realname.focus();  
        return false;  
    }  
    if(form2.mobile.value=='请输入您的手机号')  
    {  
        alert("请输入您的手机号!");  
        form2.mobile.focus();  
        return false;  
    }  
    return true;  
}  
</script>  
<script language="javascript">   
    function clearDefaultText2(el2, message2) {  
        var obj2 = el2;  
        if (typeof (el2) == "string")  
            obj2 = document.getElementById("mobile");  
        if (obj2.value == message2) {  
            obj2.value = "";  
        }  
        obj2.onblur = function() {  
            if (obj2.value == "") {  
                obj2.value = message2;  
            }  
        }  
    }  
</script>  
  
<script language="javascript">   
    function clearDefaultText(el, message) {  
        var obj = el;  
        if (typeof (el) == "string")  
            obj = document.getElementById("realname");  
        if (obj.value == message) {  
            obj.value = "";  
        }  
        obj.onblur = function() {  
            if (obj.value == "") {  
                obj.value = message;  
            }  
        }  
    }  
</script>  
<div id="popDiv" class="mydiv" style="display:none;">  
<h4><span>免费预约</span><a href="javascript:closeDiv()">X 关闭</a></h4>  
王gg  
</div>  
<div id="bg" class="bg" style="display:none;"></div>  
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>  
<a href="javascript:showDiv()">open</a>