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 相关文章推荐
JavaScript 核心参考教程 内置对象
Oct 13 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
javascript的数据类型、字面量、变量介绍
May 23 Javascript
动态加载jquery库的方法
Feb 12 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
jQuery学习笔记之创建DOM元素
Jan 19 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
koa大型web项目中使用路由装饰器的方法示例
Apr 02 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP中的错误处理、异常处理机制分析
2012/05/07 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
PHP实现的各类hash算法长度及性能测试实例
2017/08/27 PHP
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JavaScript判断undefined类型的正确方法
2015/06/30 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
2017/08/23 jQuery
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
vue 之 css module的使用方法
2018/12/04 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
python计算最大优先级队列实例
2013/12/18 Python
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
python实现的登录和操作开心网脚本分享
2014/07/09 Python
python通过shutil实现快速文件复制的方法
2015/03/14 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python3 修改默认环境的方法
2019/02/16 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
一款基于css3麻将筛子3D翻转特效的实例教程
2014/12/31 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android