如何锁定input内容input 只读 不可修改改
点击联系发帖人
时间：2016-12-08 02:41
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2010年10月 Web 开发大版内专家分月排行榜第三
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
本帖子已过去太久远了，不再提供回复功能。HTML中让表单input等文本框为只读不可编辑的方法 - Triangel - 博客园
方法1: onfocus=this.blur()&
&input type="text" name="input1" value="中国" onfocus=this.blur()&&方法2:readonly&&input type="text" name="input1" value="中国" readonly&&&input type="text" name="input1" value="中国" readonly="true"&&方法3: disabled&&input type="text" name="input1" value="中国" disabled&
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）。 一般比较常用的情况是：在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly 。经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话，若表单中只有input(text / password)和textarea元素，那还是可以的，如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)我们常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。一些性能问题：
display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间
repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
所以display:none才会产生reflow
visibility:hidden只会触发repaint后使用快捷导航没有帐号？
只需一步，快速开始
查看: 8017|回复: 8
如何禁止修改文本框input中的内容 只能从弹出层中取值
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
1.是否能禁止修改文本框input中的内容。也就是只能从弹出层中取值。而后不能修改。
2. 如何实现只能选择一个值？ 而不是多选？？？？
以上只是对这代码的一个扩充吧。谁曾经修改过这些功能？
&font color=red&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&script src=&/ajax/libs/jquery/1.4/jquery.min.js&&&/script&
/*******************************
* @author Mr.Think
*******************************/
;(function($){
$.fn.bgIframe = $.fn.bgiframe = function(s) {
// This is only for IE6
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
s = $.extend({
top : 'auto', // auto == .currentStyle.borderTopWidth
left : 'auto', // auto == .currentStyle.borderLeftWidth
width : 'auto', // auto == offsetWidth
height : 'auto', // auto == offsetHeight
opacity : true,
src : 'javascript:'
}, s || {});
var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
html = '&iframe class=&bgiframe&frameborder=&0&tabindex=&-1&src=&'+s.src+'&'+
'style=&display:position:z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
return this.each(function() {
if ( $('& iframe.bgiframe', this).length == 0 )
this.insertBefore( document.createElement(html), this.firstChild );
})(jQuery);
//选择标签至文本域插件
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表单或class或id名
drop:$('#dropbox'),//弹出框定位
pseudoClass:$('#dropbox&p&a'),//可选择的标签定位
close:$('em.close'),//关闭按钮定位
separator:',',//标签间分隔符,建议使用英文逗号
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放标签的数组
var _left=_input.offset(). //左绝对距离
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind('keyup change',function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == '') {
_arr = new Array();
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stopPropagation();
iset.pseudoClass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inArray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inArray(_txt,_arr)==-1) && (_arr.length&_maxCount )){
_arr.push(_txt);
_inputVal=_arr.join(iset.separator);
// if(_inputVal.charAt(0)==','){
// _inputVal.replace(/,/,'')
_input.val(_inputVal);
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
})(jQuery);
//插件调用
$(function(){
$('#demo').iSelectTags();
* 还可以传入参数调用
$('#test').iSelectTags({
name:'#test',
drop:$('.drop'),
&提示：您可以先修改部分代码再运行
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
找到答案了。 &input type=&text& name=&input& class=&txt bthday& readonly=&readonly& value=&& /&
2. 如何实现只能选择一个值？ 而不是多选？？？？
这该如何实现呢？？ 请大家帮帮忙
& && &使用隐藏的&input type=&file&/&控件，然后用一个只读的文本框和一个按钮来模拟&input type=&file&/&的功能。
&input type=&file& name=&file& onpropertychange=&file1.value=this.value& style=display:none/&& &
&input type=&text& name=&file1& readonly/&& &
&input type=&button& value=&浏览& id=&button1& name=&button1& onclick=&file.click()&/&+
&input type=&text& name=&input& class=&txt bthday& readonly=&readonly& value=&& /&
2. 使用脚本事件限制控件输入
& && &将&input type=&file&/&控件的鼠标右键菜单、按键事件限制住，不让用户有机会输入。
&input type=&file& onkeydown=&return false& onkeyup=&return false& oncontextmenu=&return false&&
3. 使用contenteditable属性
& && &使用该属性可以有效地限制用户在&input type=&file&/&控件中手动输入内容，而只能通过文件选择对话框选择文件。
&input type=&file& id=&file1& contenteditable=&false& /&
[[i] 本帖最后由 buypro 于
13:29 编辑 ]
UID541994在线时间 小时积分1690帖子离线17192 天注册时间
银牌会员, 积分 1690, 距离下一级还需 1310 积分
这个有点bug...
UID511783在线时间 小时积分1586帖子离线17192 天注册时间
银牌会员, 积分 1586, 距离下一级还需 1414 积分
如何实现只选一个值。
在弹出层的每个选项里面都设置 inout.value=&弹出层的值&就行了啊
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
&font color=red&
&font color=red&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& readonly=&readonly& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&script src=&/ajax/libs/jquery/1.4/jquery.min.js&&&/script&
/*******************************
* @author Mr.Think
*******************************/
;(function($){
$.fn.bgIframe = $.fn.bgiframe = function(s) {
// This is only for IE6
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
s = $.extend({
top : 'auto', // auto == .currentStyle.borderTopWidth
left : 'auto', // auto == .currentStyle.borderLeftWidth
width : 'auto', // auto == offsetWidth
height : 'auto', // auto == offsetHeight
opacity : true,
src : 'javascript:'
}, s || {});
var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
html = '&iframe class=&bgiframe&frameborder=&0&tabindex=&-1&src=&'+s.src+'&'+
'style=&display:position:z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
return this.each(function() {
if ( $('& iframe.bgiframe', this).length == 0 )
this.insertBefore( document.createElement(html), this.firstChild );
})(jQuery);
//选择标签至文本域插件
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表单或class或id名
drop:$('#dropbox'),//弹出框定位
pseudoClass:$('#dropbox&p&a'),//可选择的标签定位
close:$('em.close'),//关闭按钮定位
separator:',',//标签间分隔符,建议使用英文逗号
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放标签的数组
var _left=_input.offset(). //左绝对距离
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind('keyup change',function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == '') {
_arr = new Array();
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stopPropagation();
iset.pseudoClass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inArray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inArray(_txt,_arr)==-1) && (_arr.length&_maxCount )){
//_arr.push(_txt);
//_inputVal=_arr.join(iset.separator);
_inputVal=$(this).text();
// if(_inputVal.charAt(0)==','){
// _inputVal.replace(/,/,'')
_input.val(_inputVal);
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
})(jQuery);
//插件调用
$(function(){
$('#demo').iSelectTags();
* 还可以传入参数调用
$('#test').iSelectTags({
name:'#test',
drop:$('.drop'),
&提示：您可以先修改部分代码再运行
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
现在就剩下最后一个问题了。谁能帮帮忙？？？？？？
怎么才能兼容FF??????& &
我测试了ie6&&chrome&&opera&&.&&只发现FF不兼容。点上去没反应。（IE7 IE8 没测设过）
是不是这段有问题》？？？？ 该怎么改才能兼容FF?
_txt=$(this).text();
[[i] 本帖最后由 buypro 于
12:21 编辑 ]
UID380093在线时间 小时积分1246帖子离线17192 天注册时间
就这么个效果没必要动用jQuery吧。用jQuery更麻烦了。给你写了段原生的。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{color:}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo{position:}
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{position:display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&script type=&text/javascript&&
window.onload = function ()
var oDemo = document.getElementById(&demo&);
var oInput = document.getElementsByTagName(&input&)[0];
var oDropbox = document.getElementById(&dropbox&);
var aA = oDropbox.getElementsByTagName(&a&);
var oClose = document.getElementsByTagName(&em&)[0];
var i = 0;
oInput.onclick = function (event)
oDropbox.style.display = &block&;
oDropbox.style.top = oDemo.offsetHeight + &px&;
oDropbox.style.left = oInput.offsetLeft + &px&;
oDropbox.style.width = oInput.clientWidth - 10 + &px&;
(event || window.event).cancelBubble =
for (i = 0; i & aA. i++)
aA[i].onclick = function (event)
oInput.value = this.innerHTML;
(event || window.event).cancelBubble =
oDropbox.onclick = function (event)
(event || window.event).cancelBubble =
document.onclick = oClose.onclick = function ()
oDropbox.style.display = &none&;
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 Ferris 于
14:10 编辑 ]
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
整理了一下 将2点要求的功能都补齐了 不过弹出层的尺寸变型了。菜鸟就是菜鸟慢慢改吧
&font color=red&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{color:}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo{position:}
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{position:display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&script type=&text/javascript&&
window.onload = function ()
var oDemo = document.getElementById(&demo&);
var oInput = document.getElementsByTagName(&input&)[0];
var oDropbox = document.getElementById(&dropbox&);
var aA = oDropbox.getElementsByTagName(&a&);
var oClose = document.getElementsByTagName(&em&)[0];
var i = 0;
oInput.onclick = function (event)
oDropbox.style.display = &block&;
oDropbox.style.top = oDemo.offsetHeight + &px&;
oDropbox.style.left = oInput.offsetLeft + &px&;
oDropbox.style.width = oInput.clientWidth - 10 + &px&;
(event || window.event).cancelBubble =
for (i = 0; i & aA. i++)
aA[i].onclick = function (event)
oInput.value = this.innerHTML;
// (event || window.event).cancelBubble =
//取消变量累加
oDropbox.onclick = function (event)
(event || window.event).cancelBubble =
document.onclick = oClose.onclick = function ()
oDropbox.style.display = &none&;
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& readonly=&readonly& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&提示：您可以先修改部分代码再运行
（运行代码框，可以修改代码运行，方便直观）
[[i] 本帖最后由 buypro 于
19:54 编辑 ]
Powered by}
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
2010年10月 Web 开发大版内专家分月排行榜第三
2012年 总版技术专家分年内排行榜第一2007年 总版技术专家分年内排行榜第二2006年 总版技术专家分年内排行榜第二2004年 总版技术专家分年内排行榜第二
2005年 总版技术专家分年内排行榜第三2003年 总版技术专家分年内排行榜第三2002年 总版技术专家分年内排行榜第三
本帖子已过去太久远了，不再提供回复功能。HTML中让表单input等文本框为只读不可编辑的方法 - Triangel - 博客园
方法1: onfocus=this.blur()&
&input type="text" name="input1" value="中国" onfocus=this.blur()&&方法2:readonly&&input type="text" name="input1" value="中国" readonly&&&input type="text" name="input1" value="中国" readonly="true"&&方法3: disabled&&input type="text" name="input1" value="中国" disabled&
Readonly和Disabled它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：
Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去（readonly接受值更改可以回传，disable接受改但不回传数据）。 一般比较常用的情况是：在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时应该将它的属性设置为readonly 。经常遇到当用户正式提交了表单后需要等待管理员的信息验证，这就不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值就会被清除。如果说在这种情况下用readonly来代替disabled的话，若表单中只有input(text / password)和textarea元素，那还是可以的，如果存在其他发元素，比如select，用户可以在重新改写值后按回车键进行提交(回车是默认的submit触发按键)我们常常在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。disabled和readonly这两个属性有一些共同之处，比如都设为true，则form属性将不能被编辑，往往在写js代码的时候容易混合使用这两个属性，其实他们之间是有一定区别的：如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。而readonly只是针对文本输入框这类可以输入文本的输入项，如果设为true，用户只是不能编辑对应的文本，但是仍然可以聚焦焦点，并且在提交表单的时候，该输入项会作为form的一项提交。一些性能问题：
display: none和visibility:hidden的区别就是visibility:hidden会保留元素的空间
repaint(重绘) ，repaint发生更改时，元素的外观被改变，且在没有改变布局的情况下发生，如改变outline,visibility,background color，不会影响到dom结构渲染。
reflow(渲染)，与repaint区别就是他会影响到dom的结构渲染，同时他会触发repaint，他会改变他本身与所有父辈元素(祖先)，这种开销是非常昂贵的，导致性能下降是必然的，页面元素越多效果越明显。
所以display:none才会产生reflow
visibility:hidden只会触发repaint后使用快捷导航没有帐号？
只需一步，快速开始
查看: 8017|回复: 8
如何禁止修改文本框input中的内容 只能从弹出层中取值
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
1.是否能禁止修改文本框input中的内容。也就是只能从弹出层中取值。而后不能修改。
2. 如何实现只能选择一个值？ 而不是多选？？？？
以上只是对这代码的一个扩充吧。谁曾经修改过这些功能？
&font color=red&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&script src=&/ajax/libs/jquery/1.4/jquery.min.js&&&/script&
/*******************************
* @author Mr.Think
*******************************/
;(function($){
$.fn.bgIframe = $.fn.bgiframe = function(s) {
// This is only for IE6
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
s = $.extend({
top : 'auto', // auto == .currentStyle.borderTopWidth
left : 'auto', // auto == .currentStyle.borderLeftWidth
width : 'auto', // auto == offsetWidth
height : 'auto', // auto == offsetHeight
opacity : true,
src : 'javascript:'
}, s || {});
var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
html = '&iframe class=&bgiframe&frameborder=&0&tabindex=&-1&src=&'+s.src+'&'+
'style=&display:position:z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
return this.each(function() {
if ( $('& iframe.bgiframe', this).length == 0 )
this.insertBefore( document.createElement(html), this.firstChild );
})(jQuery);
//选择标签至文本域插件
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表单或class或id名
drop:$('#dropbox'),//弹出框定位
pseudoClass:$('#dropbox&p&a'),//可选择的标签定位
close:$('em.close'),//关闭按钮定位
separator:',',//标签间分隔符,建议使用英文逗号
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放标签的数组
var _left=_input.offset(). //左绝对距离
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind('keyup change',function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == '') {
_arr = new Array();
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stopPropagation();
iset.pseudoClass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inArray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inArray(_txt,_arr)==-1) && (_arr.length&_maxCount )){
_arr.push(_txt);
_inputVal=_arr.join(iset.separator);
// if(_inputVal.charAt(0)==','){
// _inputVal.replace(/,/,'')
_input.val(_inputVal);
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
})(jQuery);
//插件调用
$(function(){
$('#demo').iSelectTags();
* 还可以传入参数调用
$('#test').iSelectTags({
name:'#test',
drop:$('.drop'),
&提示：您可以先修改部分代码再运行
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
找到答案了。 &input type=&text& name=&input& class=&txt bthday& readonly=&readonly& value=&& /&
2. 如何实现只能选择一个值？ 而不是多选？？？？
这该如何实现呢？？ 请大家帮帮忙
& && &使用隐藏的&input type=&file&/&控件，然后用一个只读的文本框和一个按钮来模拟&input type=&file&/&的功能。
&input type=&file& name=&file& onpropertychange=&file1.value=this.value& style=display:none/&& &
&input type=&text& name=&file1& readonly/&& &
&input type=&button& value=&浏览& id=&button1& name=&button1& onclick=&file.click()&/&+
&input type=&text& name=&input& class=&txt bthday& readonly=&readonly& value=&& /&
2. 使用脚本事件限制控件输入
& && &将&input type=&file&/&控件的鼠标右键菜单、按键事件限制住，不让用户有机会输入。
&input type=&file& onkeydown=&return false& onkeyup=&return false& oncontextmenu=&return false&&
3. 使用contenteditable属性
& && &使用该属性可以有效地限制用户在&input type=&file&/&控件中手动输入内容，而只能通过文件选择对话框选择文件。
&input type=&file& id=&file1& contenteditable=&false& /&
[[i] 本帖最后由 buypro 于
13:29 编辑 ]
UID541994在线时间 小时积分1690帖子离线17192 天注册时间
银牌会员, 积分 1690, 距离下一级还需 1310 积分
这个有点bug...
UID511783在线时间 小时积分1586帖子离线17192 天注册时间
银牌会员, 积分 1586, 距离下一级还需 1414 积分
如何实现只选一个值。
在弹出层的每个选项里面都设置 inout.value=&弹出层的值&就行了啊
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
&font color=red&
&font color=red&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& readonly=&readonly& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&script src=&/ajax/libs/jquery/1.4/jquery.min.js&&&/script&
/*******************************
* @author Mr.Think
*******************************/
;(function($){
$.fn.bgIframe = $.fn.bgiframe = function(s) {
// This is only for IE6
if ( $.browser.msie && /6.0/.test(navigator.userAgent) ) {
s = $.extend({
top : 'auto', // auto == .currentStyle.borderTopWidth
left : 'auto', // auto == .currentStyle.borderLeftWidth
width : 'auto', // auto == offsetWidth
height : 'auto', // auto == offsetHeight
opacity : true,
src : 'javascript:'
}, s || {});
var prop = function(n){return n&&n.constructor==Number?n+'px':n;},
html = '&iframe class=&bgiframe&frameborder=&0&tabindex=&-1&src=&'+s.src+'&'+
'style=&display:position:z-index:-1;'+
(s.opacity !== false?'filter:Alpha(Opacity=\'0\');':'')+
'top:'+(s.top=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\')':prop(s.top))+';'+
'left:'+(s.left=='auto'?'expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\')':prop(s.left))+';'+
'width:'+(s.width=='auto'?'expression(this.parentNode.offsetWidth+\'px\')':prop(s.width))+';'+
'height:'+(s.height=='auto'?'expression(this.parentNode.offsetHeight+\'px\')':prop(s.height))+';'+
return this.each(function() {
if ( $('& iframe.bgiframe', this).length == 0 )
this.insertBefore( document.createElement(html), this.firstChild );
})(jQuery);
//选择标签至文本域插件
;(function(){
$.fn.extend({
iSelectTags:function(options){
var iset={
name:'.tagsbox',//表单或class或id名
drop:$('#dropbox'),//弹出框定位
pseudoClass:$('#dropbox&p&a'),//可选择的标签定位
close:$('em.close'),//关闭按钮定位
separator:',',//标签间分隔符,建议使用英文逗号
maxCount:10 //默认限制个数,也可以设置表单的data-count值覆盖默认值
options = options || {};
$.extend(iset, options);
var _input=$(iset.name);
var _inputVal=_input.val();
var _arr=new Array(); //存放标签的数组
var _left=_input.offset(). //左绝对距离
var _top=_input.offset().top+_input.outerHeight(); //上绝对距离,此处要加上表单的高度
var _dropW=_input.outerWidth()-parseInt(_input.css('border-left-width'))-parseInt(_input.css('border-right-width'))-parseInt(iset.drop.css('paddingLeft'))-parseInt(iset.drop.css('paddingRight'));
iset.drop.css({'position':'absolute','left':_left+'px','top':_top+'px','width':_dropW+'px'});
//弹出框的宽度,此处计算的是与表单实际宽度相等的.也可以直接在样式中定义.
var _maxCount=parseInt(_input.attr('data-count'));//限制选择个数
if(isNaN(_maxCount)){
_maxCount=iset.maxCount
_input.click(function(){
iset.drop.show();
iset.drop.bgiframe();//调用bgiframe插件,解决ie6下select的z-index无限大问题
}).bind('keyup change',function(){
//可以在此处扩展手动输入标签情况下的相关判断
//if语句可避免清空重新选择时第一个字符为逗号
if ($(this).val() == '') {
_arr = new Array();
_arr = $(this).val().split(iset.separator);//当用户手动删除或修改标签值后更新标签值
$(document).click(function(e){
//点击非弹出框区域时关闭弹出框
//下面的 if语句是用来判断传入的是class还是id
if(iset.name.charAt(0)=='#'){
if(e.target.id!=iset.name.substring(1)){
iset.drop.hide();
}else if(iset.name.charAt(0)=='.'){
if(e.target.className!=iset.name.substring(1)){
iset.drop.hide();
iset.drop.click(function(e){
//阻止弹出框区域默认事件
e.stopPropagation();
iset.pseudoClass.click(function(){
//标签选择
_txt=$(this).text();
//下面的$.inArray是用来判断是否重复
//若想反馈重复提示或走出限制个数提示,可改进下面的if语句
if(($.inArray(_txt,_arr)==-1) && (_arr.length&_maxCount )){
//_arr.push(_txt);
//_inputVal=_arr.join(iset.separator);
_inputVal=$(this).text();
// if(_inputVal.charAt(0)==','){
// _inputVal.replace(/,/,'')
_input.val(_inputVal);
//关闭按钮
iset.close.click(function(){
iset.drop.hide();
})(jQuery);
//插件调用
$(function(){
$('#demo').iSelectTags();
* 还可以传入参数调用
$('#test').iSelectTags({
name:'#test',
drop:$('.drop'),
&提示：您可以先修改部分代码再运行
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
现在就剩下最后一个问题了。谁能帮帮忙？？？？？？
怎么才能兼容FF??????& &
我测试了ie6&&chrome&&opera&&.&&只发现FF不兼容。点上去没反应。（IE7 IE8 没测设过）
是不是这段有问题》？？？？ 该怎么改才能兼容FF?
_txt=$(this).text();
[[i] 本帖最后由 buypro 于
12:21 编辑 ]
UID380093在线时间 小时积分1246帖子离线17192 天注册时间
就这么个效果没必要动用jQuery吧。用jQuery更麻烦了。给你写了段原生的。
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{color:}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo{position:}
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{position:display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&script type=&text/javascript&&
window.onload = function ()
var oDemo = document.getElementById(&demo&);
var oInput = document.getElementsByTagName(&input&)[0];
var oDropbox = document.getElementById(&dropbox&);
var aA = oDropbox.getElementsByTagName(&a&);
var oClose = document.getElementsByTagName(&em&)[0];
var i = 0;
oInput.onclick = function (event)
oDropbox.style.display = &block&;
oDropbox.style.top = oDemo.offsetHeight + &px&;
oDropbox.style.left = oInput.offsetLeft + &px&;
oDropbox.style.width = oInput.clientWidth - 10 + &px&;
(event || window.event).cancelBubble =
for (i = 0; i & aA. i++)
aA[i].onclick = function (event)
oInput.value = this.innerHTML;
(event || window.event).cancelBubble =
oDropbox.onclick = function (event)
(event || window.event).cancelBubble =
document.onclick = oClose.onclick = function ()
oDropbox.style.display = &none&;
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 Ferris 于
14:10 编辑 ]
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
UID570162在线时间 小时积分152帖子离线17192 天注册时间
初级会员, 积分 152, 距离下一级还需 48 积分
整理了一下 将2点要求的功能都补齐了 不过弹出层的尺寸变型了。菜鸟就是菜鸟慢慢改吧
&font color=red&
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml&&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&title&选择标签至文本域效果,可多选/可过滤重复/可限制个数@Mr.Think&/title&
/*reset css*/
body,input{letter-spacing:1font:12px/1.5 tahoma,arial,\5b8b\4f53}
body{color:}
div,h2,p,input,select{margin:0;padding:0}
input{vertical-align:middle}
h1{font-size:1font-weight:normal}
h1 a{background:#047;padding:2px 3color:#text-decoration:none}
h1 a:hover{background:#a40000;color:#text-decoration:underline}
h3{color:#888;font-weight:font-size:1margin:1position:relative}
/*demo css*/
#demo{position:}
#demo input{_margin-top:1padding-left:5border:1px solid #999;width:700height:20font-size:14color:#000}
#dropbox{position:display:z-index:9999;padding:5background:#border:1px solid #999;border-top:0;z-index:999}
#dropbox a{margin-right:8text-decoration:none}
#dropbox a:hover{text-decoration:underline}
#dropbox p{line-height:24px}
#dropbox em.close{float:color:#999;font-style:cursor:pointer}
&script type=&text/javascript&&
window.onload = function ()
var oDemo = document.getElementById(&demo&);
var oInput = document.getElementsByTagName(&input&)[0];
var oDropbox = document.getElementById(&dropbox&);
var aA = oDropbox.getElementsByTagName(&a&);
var oClose = document.getElementsByTagName(&em&)[0];
var i = 0;
oInput.onclick = function (event)
oDropbox.style.display = &block&;
oDropbox.style.top = oDemo.offsetHeight + &px&;
oDropbox.style.left = oInput.offsetLeft + &px&;
oDropbox.style.width = oInput.clientWidth - 10 + &px&;
(event || window.event).cancelBubble =
for (i = 0; i & aA. i++)
aA[i].onclick = function (event)
oInput.value = this.innerHTML;
// (event || window.event).cancelBubble =
//取消变量累加
oDropbox.onclick = function (event)
(event || window.event).cancelBubble =
document.onclick = oClose.onclick = function ()
oDropbox.style.display = &none&;
&div id=&demo&&
&label for=&tagsbox&&&strong&标签：&/strong&&input type=&text& value=&点我& readonly=&readonly& class=&tagsbox& data-count=&10& /&&/label&
&div id=&dropbox&&
&em class=&close& title=&关闭&&关闭&/em&
&p&&strong&温馨提示：&/strong&选择下面的热门标签及使用过的标签,标签将自动排列至表单域。&/p&
&p&&strong&热门标签：&/strong&&a href=&javascript:void(0)&&时光漫步&/a&&a href=&javascript:void(0)&&JavaScript&/a&&a href=&javascript:void(0)&&jQuery Plugin&/a&&a href=&javascript:void(0)&&那一年&/a&&a href=&javascript:void(0)&&jQuery插件&/a&&a href=&javascript:void(0)&&简单&/a&&a href=&javascript:void(0)&&星空&/a&&a href=&javascript:void(0)&&梦田&/a&&a href=&javascript:void(0)&&晴朗&/a&&a href=&javascript:void(0)&&mrthink.net&/a&&/p&
&p&&strong&您使用过的标签：&/strong&&a href=&javascript:void(0)&&许巍&/a&&a href=&javascript:void(0)&&Sophie Zelmani&/a&&a href=&javascript:void(0)&&王菲&/a&&a href=&javascript:void(0)&&小娟&山谷里的居民&/a&&a href=&javascript:void(0)&&Ke$Ha&/a&&a href=&javascript:void(0)&&Shakira&/a&&a href=&javascript:void(0)&&朴树&/a&&a href=&javascript:void(0)&&罗大佑&/a&&/p&
&br style=&clear:both& /&
&提示：您可以先修改部分代码再运行
（运行代码框，可以修改代码运行，方便直观）
[[i] 本帖最后由 buypro 于
19:54 编辑 ]
Powered by}
我要回帖
更多关于 input设置不可修改 的文章
更多推荐
- ·各位618买了啥好用的投资理财买什么产品好？
- ·形容人不地道表示卸磨杀驴的句子成语怎么说？
- ·公安局可以查微信微信卸载重装聊天记录全没了吗
- ·上海顶级豪门家族吉品鲍府网传新闻
- ·物流行业一般纳税人进项抵扣企业体量大进项不合规，网络货运能解决进项票的问题吗？伙伴们帮答下
- ·求助帖 求一个64位锐捷锐捷认证客户端下载 多谢
- ·python图像格式转换如何转辉度图像？
- ·N9020A和E4438C试用说明书谁有？要中文的
- ·简谱tcs标准编写软件下载载
- ·Apk包送测规范什么意思
- ·安卓 appbarlayoutt实现什么功能
- ·技嘉主板集成显卡驱动x99主板用什么显卡好
- ·搜90092网站会出天龙八部3基址搜索器网站是什么回事
- ·宝宝辅食上那个网购网站十大排名买好?
- ·vb 在线等急急急
- ·sony a7riiI的5轴防抖好不好？
- ·VSgdb 调试 堆栈状态下，调用堆栈的字节偏移是什么意思
- ·男子奥运会五项全能能比赛系统分析与设计，c++代码编写，谁有啊
- ·求字体~ 找求大神p图
- ·高能燃烧爆破剂强力起爆器yjql500怎么用
- ·如何锁定input内容input 只读 不可修改改
- ·固定资产艺术团管理软件件哪个好
- ·博雅德克萨斯扑克克 筹码公告怎么写？
- ·fifafifa online3强化历史怎么强化5
- ·如何打造一家智能h3健身游泳会所会所
- ·室内五人制足球皇帝法尔考考巅峰时期能在欧洲豪门立足吗
- ·国际象棋谢军简介大师谢军老公
- ·篮球比赛比分差距最大的比分是多少
- ·命运冠位指定4星从者杀阶 练卡米拉好还是斯忒诺好
- ·最好的乒乓球拍多少钱王皓身高多少
- ·黑色棒球服黑色衬衫配什么裤子好看看
- ·Dotamax里的职业泰国max比赛金腰带是什么东东
- ·我属于肥胖型的，现在健身完喝健身吃什么蛋白粉好可以吗？
- ·北京首钢男篮订票张松涛是哪里人,。,
- ·求解构成子宫的肌肉类型型的区别 对弹速有影响么
- ·乒乓球拍什么牌子好去哪个网站买是正品？
