纯HTML和js：简单实现页面单个输入框自动切为双输入框
2010-07-29 18:58
1001 查看
O、前言：
最近有朋友找我要些简单的JS，想看看，今天写了个最简单的、不泄漏公司项目的小东西，拿出来分享一下js基本手法。
话不多说，先上图样。
一、图样：
目标：
将页面某个单个输入框改为双输入框，以便支持控件输入日期数字或其他规范类型；
二、特点：
1， 实现了自动反填原输入框，从而最大保证了后台不用改动，前台只需少量设定；
2， 有注释，提供思录和js对INPUT操作的代码参考；
注意：
0， 本文件引用了如下版本的 《calendar》 包，特别致谢
1， 类型TYPE，目前只定义了{DATE， SRT} 可自行扩展；
2， 类型的判定需要自己判定后，设置此js定义好的TYPE来区分切换出不同的带控件INPUT；
3， 要下载包，请去下我的空间下载，算是支持一下我的下载分。特此谢过！
三、正文：
＝＝＝＝＝＝＝＝＝＝以下为正文＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
最近有朋友找我要些简单的JS，想看看，今天写了个最简单的、不泄漏公司项目的小东西，拿出来分享一下js基本手法。
话不多说，先上图样。
一、图样：
目标：
将页面某个单个输入框改为双输入框，以便支持控件输入日期数字或其他规范类型；
二、特点：
1， 实现了自动反填原输入框，从而最大保证了后台不用改动，前台只需少量设定；
2， 有注释，提供思录和js对INPUT操作的代码参考；
注意：
0， 本文件引用了如下版本的 《calendar》 包，特别致谢
/* (C) www.dhtmlgoodies.com, September 2005 汉化修改: 吴剑, http://www.cnblogs.com/luck0235 */
1， 类型TYPE，目前只定义了{DATE， SRT} 可自行扩展；
2， 类型的判定需要自己判定后，设置此js定义好的TYPE来区分切换出不同的带控件INPUT；
3， 要下载包，请去下我的空间下载，算是支持一下我的下载分。特此谢过！
三、正文：
＝＝＝＝＝＝＝＝＝＝以下为正文＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<html>
<head>
<title>
</title>
<link href="calendarDEMO/css/calendar.css" mce_href="calendarDEMO/css/calendar.css" rel="stylesheet" type="text/css" />
<mce:script type ="text/javascript" src ="calendarDEMO/js/calendar.js"></mce:script>
<mce:style><!--
.bigWidth{
width:300px;
border: 1px solid #00FF00;
}
.smallWidth{
width:140px;
border: 1px solid #0000FF;
}
--></mce:style><style mce_bogus="1">.bigWidth{
width:300px;
border: 1px solid #00FF00;
}
.smallWidth{
width:140px;
border: 1px solid #0000FF;
}</style>
<mce:script language="javascript"><!--
/**
* 功能: 将一个输入框拆分为两个, 以支持填入范围
*
* by: zhnb0115
* date: 2010-07-29
* email: zhnb0115@163.com
*/
/* base Methods */
//文件信息
var INFO = "[SelScope, by Zhnb, date 2010-07-26] ";
//公用参数区
var inputField; //输入框对象
var inputDiv; //原始html所以框体
var oriParam; //原始值
var paramType; //原始值类型{ TYPE_DATE, TYPE_STR }
var oriInputFieldTag; //原始输入框html
var newParam1; //新值1
var newParam2; //新值2
/* common Methods */
//window.onload加载器
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
//入口方法
function selScope( pInputField, pInputDiv, pOriParam, pType ){
//初始化参数: 完成后, 公用参数全部可用
if( initialParams( pInputField, pInputDiv, pOriParam, pType ) == false ){
return false;
}
//拆分输入框
replaceDiv();
}
//初始化方法:填充操作对象及所需参数
function initialParams( pInputField, pInputDiv, pOriParam, pType ){
//==============调试信息========================
var info = document.getElementById("info");
//==============调试信息========================
//1, 必备参数为空则不执行,直接退出
if( pInputField == null || pInputDiv == null || pType == null ){
alert( INFO + 'cannot init params contains the "NULL"');
return false;
}
//1-1, 初始化必备参数
inputField = pInputField;
inputDiv = pInputDiv;
oriParam = pOriParam;
paramType = pType;
//只保留最原始值
if( oriInputFieldTag == null ){
oriInputFieldTag = inputDiv.innerHTML;
}
//2, 拆分原始参数
if( oriParam != null ){
var oriParamArr = new Array();
oriParamArr = oriParam.split('--');
if( oriParamArr.length == 2 ){
newParam1 = oriParamArr[0];
newParam2 = oriParamArr[1];
}else{
newParam1 = oriParamArr[0];
newParam2 = null;
}
}
}
//替换框体内容
function replaceDiv(){
//按指定规格替换输入框体html
//日期类型: 加载display_calendar()至onclick事件
if( paramType == 'TYPE_DATE' ){
joinDateHtml();
}
//字符串类型
else if( paramType == 'TYPE_STR' ){
joinStrHtml();
}
else{
oriInput();
}
info.innerText = inputDiv.innerHTML;
}
//获取框体表单对象隐藏处理后的内容
function oriHidInput(){
var newInputHtml = '<input id="' + inputField.id + '" name="' + inputField.name + '" ' + 'class="bigWidth" type="text" value="" style="display:none;" mce_style="display:none;" />';
return document.createElement( newInputHtml );
}
//创建日期定制输入框
function crtDateInput( iptNo ){
var ymd = '/'yyyy-mm-dd/'';
var ipd = '<input id="' + inputField.id + iptNo + '" name="' + inputField.name + iptNo + '" type="text" onpropertychange="return fillHidden();" value="" onclick="return displayCalendar(this,' + ymd + ',this);" />';
return document.createElement( ipd );
}
//创建定数值制输入框
function crtStrInput( iptNo ){
var ips = '<input id="' + inputField.id + iptNo + '1" name="' + inputField.name + iptNo + '" type="text" value="" onpropertychange="return fillHidden();" onkeyup="return chkNumeric(this);" />';
return document.createElement( ips );
}
//获取原始框体内容
function oriInput(){
//清理层内内容
clrDiv();
//显示层内INPUT
var inputId = inputField.id;
document.getElementById( inputId ).style.display = 'block';
}
//清理框体内元素
function clrDiv(){
inputDiv.innerHTML = "";
var newInput = oriHidInput();
inputDiv.appendChild( newInput );
}
/* private Methods */
//拼接日期查询范围
function joinDateHtml(){
//清理层内内容
clrDiv();
var newDate = crtDateInput('1');
inputDiv.appendChild( newDate );
//分隔符
var sep = document.createElement( "span" );
sep.innerText = '--';
inputDiv.appendChild( sep );
inputDiv.appendChild( crtDateInput('2') );
}
//拼接数字查询范围
function joinStrHtml(){
//清理层内内容
clrDiv();
inputDiv.appendChild( crtStrInput('1') );
//分隔符
var sep = document.createElement( "span" );
sep.innerText = '--';
inputDiv.appendChild( sep );
inputDiv.appendChild( crtStrInput('2') );
}
//反填隐藏表单
function fillHidden(){
//原始表单ID
var oriIptId = inputField.id;
var value0 = document.getElementById( oriIptId );
var value1 = document.getElementById( oriIptId + "1" );
var value2 = document.getElementById( oriIptId + "2" );
value0.value = value1.value + '--' + value2.value;
info.innerText = document.getElementById( oriIptId ).value;
}
//===================================================================================
/* local Methods */
function chkNumeric( obj ){
obj.value = obj.value.replace(/[^0-9.]/g, '');
obj.value = obj.value.replace(/(/./d/d/d/d)/d/ig, "$1");
}
//------------------------------------------------------------------------------------
/* Main Methods */
function myScopeMain(){
var pInputField = document.getElementById("editEntity:searchValue1");
var pInputDiv = document.getElementById("inputArea");
var pOriParam = '2010-07-01';
var pType = document.getElementById("selScopeTag").value;
selScope( pInputField, pInputDiv, pOriParam, pType );
}
//------------------------------------------------------------------------------------
// --></mce:script>
</head>
<body>
<div align="center">
<input type="button" onclick="return myScopeMain();" value="测试">
</div>
<div style="border:1px #888888 solid;" mce_style="border:1px #888888 solid;">
<table>
<tr>
<td>
<select name='selScopeTag' style="width:120px;">
<option value='TYPE_DATE'>TYPE_DATE</option>
<option value='TYPE_STR'>TYPE_STR</option>
<option value='TYPE_UD'>TYPE_UD</option>
</select>
</td><td>
<span id='inputArea' style="border:1px #FF0000 solid;" mce_style="border:1px #FF0000 solid;" >
<input class="bigWidth" id="editEntity:searchValue1" name="editEntity:searchValue1" type="text" value="2010-07-15" />
</span>
</td>
</tr>
</table>
</div>
<div style="border:2px #DD0000 solid;" mce_style="border:2px #DD0000 solid;" id="info"> <P></div>
</body>
</html>＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Html+css+js+jquery实现简单页面登录
- js解析json的html页面 实现简单js特效
- 用HTML/JS/PHP方式实现页面延时跳转的简单实例
- 简单的js+css的输入框自动提示功能实现
- 简单的HTML中TAB分页实现，js控制页面tr行新增、删除、修改
- JS自动生成动态HTML验证码页面，输入错误自动清空输入框
- 教你用js超简单实现页面自动控制图片的宽度和高度
- js实现HTML自动刷新页面和跳转（重定向)
- js+html+css实现简单页面交互功能（2015知乎前端笔试题）http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2
- 用HTML/JS/PHP方式实现页面延时跳转的简单实例
- AJAX+Js实现html页面点击数自动更新
- window.location.href妙用 标签里用js 利用这个简单的转换思路 实现 一直也无法实现的在 页面的html标签使
- 教你用js超简单实现页面自动控制图片的宽度和高度
- 刷新页面实现方式总结(HTML,ASP,JS)
- HTML页面自动跳转的五种实现方法
- JS实现页面超时后自动跳转到登陆页面
- JS_简单实现页面输入
- js实现页面跳转，纯html实现网页定时跳转
- 使Eclipse下支持编写HTML/JS/CSS/JSP页面的自动提示
- 使用java的html解析器jsoup和jQuery实现一个自动重复抓取任意网站页面指定元素的web应用