javascript实现可编辑的下拉框
曾经遇到过一个需求的情况是这样的,我们提供给用户的输入框的可选择项只能满足用户的大部分情况的选择,但是有时候会遇到一些用户想要输入的数据是下拉项中所没有的,而用户不希望改变下拉项为输入框模式,需要说如果实在无法满足时,允许用户进行输入。由此产生了一个既可以实现下拉选择,又可以输入的下拉框功能。以下是我实现的代码:
/*-------------------------------------------------------------------------------------------
函数名称:jsLab_CreateSelectInput()
函数功能:创建支持下拉输入框对象
函数参数:
selectId 下拉对象id
inputTextName 输入框name属性
inputTextInitValue 输入框默认值
函数输出:
生成支持下拉的输入框,既可以输入又可以下拉选择
-------------------------------------------------------------------------------------------*/
function jsLab_CreateSelectInput(selectId, inputTextName, inputTextInitValue)
{
/*判断传入的下拉参数是下拉对象还是下拉框id*/
var selectDom = typeof(selectId) == "object" ? selectId : document.getElementById(selectId); /*若下拉框没有name属性则给下拉框创建name属性*/
if(!selectDom.name)
{
selectDom.name = selectDom.id;
} if(typeof(inputTextName) == "undefined")
{
inputTextName = selectDom.name + "InputText";
} if(typeof(selectDom.parentNode) == "undefined")
{
return false;
}
/*下拉框所在的父节点以及父节点的定位位置*/
var selectParent = selectDom.parentNode;
// store the raw position of selectDom's parent
var selectParentRawWidth = selectParent.offsetWidth;
var selectParentRawHeight = selectParent.offsetHeight; // clip the selectDom
if(selectDom.style.position != "absolute")
{
//selectDom.style.position = "absolute";
}
// store the raw position of selectDom
var selectRawTop = selectDom.offsetTop;
var selectRawLeft = selectDom.offsetLeft; var selectOffsetWidth = selectDom.offsetWidth;
var selectOffsetHeight = selectDom.offsetHeight; /*设置下拉框可视部分*/
selectDom.style.clip = "rect(0px, "+ selectOffsetWidth +"px, "+ selectOffsetHeight +"px, "+(selectOffsetWidth - 4)+"px )"; /*判断下拉框是否存在inputText属性*/
if(typeof(selectDom.inputText) == "undefined")
{
var oInputText = document.createElement("input"); /*define the oInputText's style value for different browsers, 定义在不同浏览器下输入框的渲染样式*/
var inputTextHeight = selectOffsetHeight - 1;
var inputTextBorderWidth = 2;
var inputTextBorderStyle = "inset";
var inputTextBorderColor = "threedlightshadow";
var inputTextBorderBottomColor = inputTextBorderColor;
var inputTextFontSize = selectOffsetHeight - 7; if(navigator && navigator.userAgent.toLowerCase())
{
var navigatorInfo = navigator.userAgent.toLowerCase(); if(navigatorInfo.indexOf("opera") >= 0)
{
inputTextHeight += 1;
inputTextBorderWidth = 1;
inputTextBorderStyle = "ridge";
inputTextBorderColor = "threedlightshadow";
inputTextFontSize += 1;
}
else if(navigatorInfo.indexOf("firefox") >= 0)
{
inputTextHeight -= 2;
inputTextBorderBottomColor = "threeddarkshadow";
}
else if(navigatorInfo.indexOf("ie") >= 0)
{
inputTextHeight -= 2;
inputTextBorderBottomColor = "threeddarkshadow";
}
else
{
inputTextFontSize = inputTextFontSize - 1;
}
} // reset the position of select_parent
//selectParent.style.width = (selectParentRawWidth - 4)+"px";
//selectParent.style.height = (selectParentRawHeight)+"px"; // define the clip input's style,定义输入框的可视样式
oInputText.style.display = "block";
oInputText.style.position = "absolute";
oInputText.style.width = (selectOffsetWidth - 20) + "px";
oInputText.style.height = inputTextHeight + "px";
//oInputText.style.top = selectRawTop + "px";
//oInputText.style.left = selectRawLeft + "px";
oInputText.style.fontSize = inputTextFontSize + "px";
oInputText.style.paddingLeft = "2px";
oInputText.style.borderWidth = inputTextBorderWidth + "px";
oInputText.style.borderStyle = inputTextBorderStyle;
oInputText.style.borderColor = inputTextBorderColor;
oInputText.style.borderBottomWidth = "1px";
oInputText.style.borderBottomColor = inputTextBorderBottomColor;
oInputText.style.borderRightWidth = "0";
oInputText.name = inputTextName;
oInputText.title = "支持手工输入方式,也可以下拉选择方式!"; selectDom.inputText = oInputText; }
else
{
var oInputText = selectDom.inputText;
} /*将输入框对象插入到下拉框前面*/
selectParent.insertBefore(oInputText,selectDom); /*将下拉框中选中的值初始化到输入框中*/
jsLab_SetSelectInputValue(selectDom, inputTextInitValue); /*给下拉绑定监听事件, 当下拉变化时,将下拉框的值初始化到输入框中*/
if(selectDom.attachEvent)
{
/*支持非火狐浏览器*/
selectDom.attachEvent("onchange",function(){
jsLab_BuildSelectInput(selectDom,selectOffsetWidth,selectOffsetHeight);
});
}
else
{
/*仅支持火狐浏览器*/
selectDom.addEventListener("change",function(){
jsLab_BuildSelectInput(selectDom,selectOffsetWidth,selectOffsetHeight);
},false);
}
} /*-------------------------------------------------------------------------------------------
函数名称:jsLab_BuildSelectInput()
函数功能:根据下拉框的选择变化将下拉框的值赋到输入框中
函数参数:
selectDom : 下拉对象id
函数输出:
-------------------------------------------------------------------------------------------*/
function jsLab_BuildSelectInput(selectDom,selectOffsetWidth,selectOffsetHeight)
{
var selectedOption = selectDom.options[selectDom.selectedIndex];
var oInputText = selectDom.inputText; if(typeof(selectedOption.innerText) == "undefined")
{
oInputText.value = selectedOption.text;
}
else
{
oInputText.value = selectedOption.innerText;
} oInputText.style.display = 'inline';
oInputText.style.color = "highlighttext";
oInputText.style.backgroundColor = "highlight";
selectDom.style.clip = "rect(0px, "+ selectOffsetWidth +"px, "+ selectOffsetHeight +"px, "+(selectOffsetWidth - 19)+"px )"; /*给输入框绑定click事件*/
oInputText.onclick = function()
{
oInputText.style.backgroundColor = "";
oInputText.style.color = "";
};
/*给下拉框绑定与输入相同事件*/
selectDom.onblur = oInputText.onclick;
} /*-------------------------------------------------------------------------------------------
函数名称:jsLab_SetSelectInputValue()
函数功能:将下拉框中选中的值初始化到新创建的输入框中
函数参数:
selectDom : 下拉对象id
inputTextInitValue:输入框默认值
函数输出:
-------------------------------------------------------------------------------------------*/
function jsLab_SetSelectInputValue(selectDom, inputTextInitValue)
{
var selectedOption = selectDom.options[selectDom.selectedIndex]; if(typeof(selectedOption.innerText) == "undefined")
{
selectDom.inputText.value = inputTextInitValue.length > 0 ? inputTextInitValue : selectedOption.text;
}
else
{
selectDom.inputText.value = inputTextInitValue.length > 0 ? inputTextInitValue : selectedOption.innerText;
}
}
javascript实现可编辑的下拉框的更多相关文章
- 用MVC的辅助方法自定义了两个控件:“可编辑的下拉框控件”和“文本框日历控件”
接触MVC也没多长时间,一开始学的时候绝得MVC结构比较清晰.后来入了门具体操作下来感觉MVC控件怎么这么少还不可以像ASP.net form那样拖拽.这样设计界面来,想我种以前没学过JS,Jquer ...
- 自制jquery可编辑的下拉框
昨天看到QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox ...
- javascript 可多选的下拉框 multiselect
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...
- html 可编辑的下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript 可多选的下拉框 multiselect 动态删除option值,动态添加option值,动态生成表格
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...
- angularJS实现可编辑的下拉框
将angularJS与插件select2结合使用即可 <!DOCTYPE html><html lang="en"><head> < ...
- EXTJS 4.2 资料 控件之Grid 行编辑绑定下拉框,并点一次触发一次事件
主要代码: { header: '属性值', dataIndex: 'PropertyValueName', width: 130, editor: new Ext.form.field.ComboB ...
- jquery实现可编辑的下拉框( input + select )
HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...
- 下拉框的change事件
6.1,获取下拉框的值(html标签中没有onchange事件的) <script language="javascript"> $(document).ready(f ...
随机推荐
- MapReduce——计算温度最大值 (基于全新2.2.0API)
MapReduce——计算温度最大值 (基于全新2.2.0API) deprecated: Job类的所有Constructors, 新的API用静态方法getInstance(conf)来去的Job ...
- PowerStack
int curInc; HashMap<Integer, Integer> incMap; Stack<Integer> stack; public SuperStack() ...
- BZOJ_1270_雷涛的小猫_(动态规划)
描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1270 有n棵树,高度为h.一只猫从任意一棵树的树顶开始,每次在同一棵树上下降1,或者跳到其他树 ...
- 年末促销 Windows Azure在线充值送微软商城硬件大礼包
春节前充值,尽享云端体验, 缤纷好礼持续进行时.即日起至2015年2月13日, 充值1000元以上即享好礼.您可以查阅WindowsAzure 官网活动页面,即刻参与活动:http://www.win ...
- c语言main函数的参数argc,argv说明
main函数参数argc,argv说明 C/C++语言中的main函数,经常带有参数argc,argv,如下: int main(int argc, char** argv) int main(i ...
- [039] 微信公众帐号开发教程第15篇-自定义菜单的view类型(访问网页)
引言及内容概要 距离写上一篇文章<自定义菜单的创建及菜单事件响应>整整过了两个月的时间,那时公众平台还没有开放view类型的菜单.在不久前,微信公众平台悄悄开放了view类型的菜单,却没有 ...
- ruby编程语言-学习笔记3(第4章 表达式和操作符)
4.6 操作符 了解优先级很重要 位移操作符 (0b1011)<< 1 # ==> "10110" 11 << 1 = 22 ...
- [liu yanling]测试流程
测试流程 1.制定测试计划 2.编辑测试用例 3.执行测试用例 4.发现并提交BUG 5.开发组修正BUG 6.对已修正BUG进行返测 7.修正完成的BUG将状态置为已关闭,未正确修正的BUG重新激活
- 如何在GeoServer上发布一张地图
在GeoServer上发布一张地图步骤大致如下: 先准备一张地图,格式可以是:jpg.png.tif等. Jpg文件对应的坐标信息文件为jgw格式文件,投影文件为prj文件;Tif文件对应的坐标信息文 ...
- javaweb 之javascript 结合
1.javascript的简介 * 是基于对象和事件驱动的语言,应用与客户端. - 基于对象: ** 提供好了很多对象,可以直接拿过来使用 - 事件驱动: ** html做网站静态效果,javascr ...