jQuery和HTML对某个标签设置只读或者禁用属性的方式

 更新时间:2023年02月28日 09:18:21   作者:爱吃牛肉的大老虎  
这篇文章主要介绍了jQuery和HTML对某个标签设置只读或者禁用属性的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

1 jQuery中只读和禁用

1.1 jquery 设置readonly属性

$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').removeAttr("readonly");//去除input元素的readonly属性
??
if($('input').attr("readonly")==true)//判断input元素是否已经设置了readonly属性

例,对于为元素设置readonly属性和取消readonly属性的方法

$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
?
$('input').attr("readonly","readonly")//将input元素设置为readonly
$('input').attr("readonly","")//去除input元素的readonly属性

1.2 jquery 设置disabled属性

$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').removeAttr("disabled");//去除input元素的disabled属性
??
if($('input').attr("disabled")==true)//判断input元素是否已经设置了disabled属性

例,对于为元素设置disabled属性和取消disabled属性的方法

$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性
?
$('input').attr("disabled","disabled")//将input元素设置为disabled
$('input').attr("disabled","")//去除input元素的disabled属性

1.3 jquery动态添加文本框的readonly只读属性

<input id="id" type="text" ?/>
?
?$("#id").attr({"readonly":"readonly"}); //添加readonly属性 & $("#ID").attr({ readonly: 'true' });
?$("#id").removeAttr("readonly"); ? ?//去除readonly属性
);

注意:

disabled和readonly这两个属性有一些共同之处,比如都设为true,则form属性将不能被编辑,往往在写js代码的时候容易混合使用这两个属性,其实他们之间是有一定区别的:

如果一个输入项的disabled设为true,则该表单输入项不能获取焦点,用户的所有操作(鼠标点击和键盘输入等)对该输入项都无效,最重要的一点是当提交表单时,这个表单输入项将不会被提交。

而readonly只是针对文本输入框这类可以输入文本的输入项,如果设为true,用户只是不能编辑对应的文本,但是仍然可以聚焦焦点,并且在提交表单的时候,该输入项会作为form的一项提交。

2 HTML中只读和禁用

有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使<input type="text" name="input1" value="中国">的内容,中国两个字不可以修改。

实现的方式归纳一下,有如下几种。 

方法1

  • οnfοcus=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="true">

完整的例子:

<input name="ly_qq"?
type="text" tabindex="2"?
onMouseOver="this.className='input_1'"?
onMouseOut="this.className='input_2'"?
value="123456789" disabled="true" readOnly="true" />?
  • disabled="true"此果文字会变成灰色,不可编辑,disabled="disabled"这样定义之后被禁用的 input 元素既不可用,也不可点击
  • readOnly="true" 文字不会变色,也是不可编辑的,readonly="readonly"只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本

css屏蔽输入:

<input style="ime-mode: disabled">

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持程序员之家。

相关文章

  • jQuery仿移动端支付宝键盘的实现代码

    jQuery仿移动端支付宝键盘的实现代码

    最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种。项目只是单纯的手机网站,所以这个功能由前端来实现,下面小编给大家带来了jQuery仿移动端支付宝键盘的实现代码,需要的朋友参考下吧
    2018-08-08
  • jQuery实现全选、反选和不选功能

    jQuery实现全选、反选和不选功能

    这篇文章主要为大家详细介绍了jQuery实现全选、反选和不选功能 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 基于jQuery的图片剪切插件

    基于jQuery的图片剪切插件

    网页应用程序需要对丰富的内容提供简单易用的上传和操作方式,但是这样会给只有少数图片处理技能的用户造成很大的困难。图片剪切是最基本的图片处理技术,这个详细的教程将包括在jQuery库上创建此参加的每一个步骤。
    2011-08-08
  • easyui Draggable组件实现拖动效果

    easyui Draggable组件实现拖动效果

    Draggable是easyui中用于实现拖拽功能的一个插件。利用它,我们可以实现控件的拖拽效果。Draggble覆盖默认值$.fn.draggable.defaults。
    2015-08-08
  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    这篇文章主要介绍了jQuery实现单击弹出Div层窗口效果,具有可关闭可拖动的功能,涉及jQuery响应鼠标事件动态变换页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • DropDownList实现可输入可选择(两种版本可选)

    DropDownList实现可输入可选择(两种版本可选)

    本篇文章主要介绍了DropDownList实现可输入可选择的具体实现代码,并附上两种版本(js版本和jquery版本),可供大家选择。有需要的朋友可以参考下
    2016-12-12
  • Struts2的s:radio标签使用及用jquery添加change事件

    Struts2的s:radio标签使用及用jquery添加change事件

    用到Struts2的s:radio标签时想给它添加一个change事件,由于此标签为页面自动生成一个radio组,不可以像正常那样控制,于是想到用jquery来实现
    2013-04-04
  • 『jQuery』取指定url格式及分割函数应用

    『jQuery』取指定url格式及分割函数应用

    使用jQuery取指定url格式,并使用alert弹出,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • JQquery的一些使用心得分享

    JQquery的一些使用心得分享

    我原以为我对jQuery的使用还过得去,可是经过昨天的工作,我才发现,原来,我才算是刚刚入门。好吧。下面,我简单讲一下,我昨天遇到的问题以及解决方案
    2012-08-08
  • EasyUI实现第二层弹出框的方法

    EasyUI实现第二层弹出框的方法

    本文给大家分享的是一则使用EasyUI实现第二层弹出框的方法,核心代码是网友提供,这里结合自己的项目需求,完善了下,推荐给大家。
    2015-03-03

最新评论

?


http://www.vxiaotou.com