JavaScript实现点击单选按钮改变输入框中文本域内容的方法


Posted in Javascript onAugust 12, 2015

本文实例讲述了JavaScript实现点击单选按钮改变输入框中文本域内容的方法。分享给大家供大家参考。具体如下:

这里实现点击单选按钮改变输入框中文本域内容的方法,是一个JavaScript 的简单应用,可以减少用户的输入,提升用户操作易用性,它类似一个TAB选项卡一样的功能,并可以完成后提交表单,值得学习。

运行效果截图如下:

JavaScript实现点击单选按钮改变输入框中文本域内容的方法

具体代码如下:

<html>
<head>
<title>JavaScript点击单选框改变输入框内容</title>
</head>
<body>
<script language=JavaScript>
var defaultValue = ""
function Changes() {
var defaultValue = "changed";
}
ie = document.all?1:0
ns4 = document.layers?1:0
var c = 1
function hideIt(id) {
if (ie) {
document.all[id].style.zIndex = c--; 
document.all[id].style.visibility = "hidden";
document.all['hider'].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c--;
document.layers[cat].layers[id].visibility = "hide";
document.layers[cat].layers['hider'].visibility = "show";
} 
}
function showIt(id) {
if (ie) {
document.all[id].style.zIndex = c++; 
document.all[id].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c++;
document.layers[cat].layers[id].visibility = "show";
}
else {
document.getElementById(id).style.zIndex = c++; 
document.getElementById(id).style.visibility = "visible"; 
} 
}
function imgLbl(tab) {
premier = frmWc.elements[tab - 1];
if (premier.checked == 1) {
premier.checked = 0;
} else {
premier.checked = 1;
}
}
</script>
<FORM name=protectForm action="" method=post >
  <TABLE width=560>
  <TR>
 <TD>
  <TABLE cellPadding=2>
  <TR align=left>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'off');return true" type=radio value=0 
  name=Level checked>
  ASP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'low');return true" type=radio 
  value=25 name=Level>
  PHP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'high');return true" type=radio value=75 name=Level>
  JSP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'excl');return true" type=radio 
  value=100 name=Level>
  AJAX</TD>
  </TR></TABLE></TD></TR></TABLE>
  <table cellspacing=1 cellpadding=0 width=562 border="0" bgcolor="7285CF" height="240">
  <tr> 
  <td colspan=3 height="145" valign="top" bgcolor="F2F2F2"> 
  <div id=off style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560" border="0">
  <tr> 
  <td width="560">ASP是一种微软发明的WEB动态编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=low 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 2; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr >
  <td width="1237">PHP是一种开源、免费平台通用型WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=high 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr>JSP是SUN公司制造的基于JAVA的WEB编程容器,也是一种WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=excl 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr> 
  <td width="953">AJAX是一种WEB交互型框架语言,可以很好的提升用户体验。</td>
  </tr>
 </table>
 </div> 
 </td>
 </tr>
 </table>
 <TABLE cellSpacing=0 cellPadding=0 width=560>
  <TR>
  <TD align=right height="30"> 
  <INPUT class=bottom type=submit value=" 确定 "> 
  <INPUT class=bottom type=button value=" 取消 " name="Button"> 
 </TD></TR></TABLE>
 </FORM>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
JS removeAttribute()方法实现删除元素的某个属性
Jan 11 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 #Javascript
JavaScript入门基础
Aug 12 #Javascript
js实现将选中值累加到文本框的方法
Aug 12 #Javascript
javascript实现简单的分页特效
Aug 12 #Javascript
JavaScript实现网站访问次数统计代码
Aug 12 #Javascript
jquery+ajax请求且带返回值的代码
Aug 12 #Javascript
javascript封装简单实现方法
Aug 11 #Javascript
You might like
用Flash图形化数据(一)
2006/10/09 PHP
PHP 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
js下拉菜单语言选项简单实现
2013/09/23 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
关于vue-resource报错450的解决方案
2017/07/24 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
基于nodejs的微信JS-SDK简单应用实现
2019/05/21 NodeJs
Vue中全局变量的定义和使用
2019/06/05 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python实现截屏的函数
2015/07/25 Python
Django实现单用户登录的方法示例
2019/03/28 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
python安装后的目录在哪里
2020/06/21 Python
html如何对span设置宽度
2019/10/30 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
什么是会话Bean
2015/05/14 面试题
预备党员思想汇报
2014/01/08 职场文书
给男朋友的道歉信
2014/01/12 职场文书
办理生育手续介绍信
2014/01/14 职场文书
综合实践活动报告
2015/02/05 职场文书
实习班主任自我评价
2015/03/11 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书