xml地图|网站地图|网站标签 [设为首页] [加入收藏]

子页向父页传值示例,css实现增加表单可用性之

来源:http://www.ccidsi.com 作者:集成经验 人气:194 发布时间:2019-09-13
摘要:复制代码 代码如下: IE方法: document.frames['myFrame'].document.getElementById('test').value; 日常设计表单的时候,大家会参与一些提示文字,比如说在找出框里,我们会唤醒“请输加入关贸总协定

复制代码 代码如下:

IE方法:
document.frames['myFrame'].document.getElementById('test').value;

日常设计表单的时候,大家会参与一些提示文字,比如说在找出框里,我们会唤醒“请输加入关贸总协定组织键字”,并在寻找框获得难点和失去主旨的时候适时的隐身和展示,最常见的做法是使用value来设置:

<script type="text/javascript">
function getValue() {
var ofrm2 = document.getElementById("TextBox1").value;
parent.document.getElementById("txbOpID").value = ofrm2
alert("ie取值结果为:" ofrm2);

火狐方法:
document.getElementById('myFrame').contentWindow.document.getElementById('test').value;

复制代码 代码如下:

}

IE、火狐方法:

<form id="search">
<input type="text" id="keyword" name="keyword" value="请输加入关贸总协定组织键字">
<button>搜索</button>
</form>
<script>
document.getElementById("keyword").onfocus = function() {
if (document.getElementById("keyword").value == "请输加入关贸总协定协会键字") {
document.getElementById("keyword").value = "";
}
}
document.getElementById("keyword").onblur = function() {
if (document.getElementById("keyword").value == "") {
document.getElementById("keyword").value = "请输加入关贸总协定组织键字";
}
}
document.getElementById("search").onsubmit = function() {
var keyword = document.getElementById("keyword").value;
if (keyword == "" || keyword == "请输加入关贸总协定组织键字") {
alert("请输加入关贸总协定组织键字");
return false;
}
return true;
}
</script>

复制代码 代码如下:

这么的代码尽管达成了我们要的功用,但却不干净,原因在于“请输加入关贸总协定协会键字”那样的文书仅仅是指示文字而已,并不是value,即使手艺上从没有过大难点,但为数十分的多时候依旧呈现麻烦,举个例子说大家也许像让提醒文字展现的颜色是灰褐,而客商键入的文本则展现石榴红。
上边看看哪些选取css来促成更加好的秘籍:

    function getValue(){

复制代码 代码如下:

         var tmp = '';

<style>
#wrapper { position: relative; display: inline; }
#description { position: absolute; left: 1px; color: #999999; display: none; }
</style>
<form id="search">
<div id="wrapper">
<label for="keyword" id="description">请输加入关贸总协定协会键字</label>
<input type="text" id="keyword" name="keyword">
</div>
<button>搜索</button>
</form>
<script>
window.onload = function() {
if (!document.getElementById("keyword").value) {
document.getElementById("description").style.display = "inline";
}
};
document.getElementById("keyword").onfocus = function() {
if (!document.getElementById("keyword").value) {
document.getElementById("description").style.display = "none";
}
}
document.getElementById("keyword").onblur = function() {
if (!document.getElementById("keyword").value) {
document.getElementById("description").style.display = "inline";
}
}
document.getElementById("search").onsubmit = function() {
if (!document.getElementById("keyword").value) {
alert("请输加入关贸总协定协会键字");
return false;
}
return true;
}
</script>

         if(document.frames){

如此的达成方式纵然CSS,JS代码都多了一部分,可是结构更合理,通过引进label来呈现提醒文字(通过CSS的position属性定位),让value自身更可是,况且提醒文字和客商输入的文书在体制更便于调节,比如颜色的深浅,进而进步表单可用性。

本文由68399皇家赌场发布于集成经验,转载请注明出处:子页向父页传值示例,css实现增加表单可用性之

关键词: 68399皇家赌场

最火资讯