让input变成不可编辑状态的方法

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

方法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="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" 此果文字会变成灰色,不可编辑。
readOnly="true" 文字不会变色,也是不可编辑的

css屏蔽输入:<input style="ime-mode: disabled">

有两种方法第一:disabled="disabled"这样定义之后被禁用的 input 元素既不可用,也不可点击。第二:readonly="readonly" 只读字段是不能修改的。不过,用户仍然可以使用 tab 键切换到该字段,还可以选中或拷贝其文本; 
时间: 2024-11-05 14:43:43

让input变成不可编辑状态的方法的相关文章

玩转web之JQuery(二)---改变表单和input的可编辑状态(封装的js)

var FormDeal = { /** * 功能 :将表单的所有input都设为可编辑的 *@param 要操作表单的id */ formWritable: function (formId) { $("#"+formId+" input,textarea").removeAttr("readonly"); $("#"+formId+" input,textarea").css('backgroundCo

JTable只要一双击就进入编辑状态,禁止的方法实现

我用JTable做了一个表格,表格内容只供查看和选择,可每次只要一双击,就进入编辑状态,可是现在我不需要当双击的时候修改表格的内容.这时候需要重载isCellEditable方法. 下面是我的实现的代码: DefaultTableModel model = new DefaultTableModel(date, columnNames) { public boolean isCellEditable(int row, int column) { return false; } }; 这样设置的话

解决:WdatePicker新增状态下只能取比当前月份大的月份,编辑状态下只能取比当前input里指定月份的月份大的值

onclick="WdatePicker({ dateFmt: 'yyyy-MM', autoPickDate: true, minDate: this.value==''?'%y-#{%M+1}':this.value })" 比如今天是七月份,那么只能取八月份及其以后的月份,其它以前的月份是点不动的: 如果我是编辑状态下input给的值是9月份,那么只能取9月分份及其以后的月份: 原文地址:https://www.cnblogs.com/firstcsharp/p/11133515

jqGrid行编辑配置,方法,事件

行编辑可以在行修改后更新数据,如下图所示 用户用鼠标点击选择一行,jqGrid将可编辑的字段转换为数据输入单元,如上面图所示.不可编辑的列,如id,不会转为可输入单元,而是保持不变.可以通过配置colModel来实现.完成修改后,按下“enter”键提交数据到服务器. 软件要求和安装 要使用行编辑功能,需要在jqGrid下载页面勾选Inline Editing和Common modules,然后下载.下载地址:http://www.trirand.com/blog/?page_id=6 要看元代

easyui 在编辑状态下,动态修改其他列值。

1 首先是自定义了一个方法uodateColumn更新列值 2 3 /** 4 *自定义的修改列值方法 5 */ 6 $.extend($.fn.datagrid.methods, { 7 updateColumn: function(datagrid,data) { 8 datagrid.each(function(){ 9 //获取缓存中的配置数据 10 var gridObj=$.data(this,"datagrid"); 11 var opts=gridObj.options

[WPF] C1ComboBox的非编辑状态

一.前言 先看看WPF自带的 ComboBox 在非编辑状态,自定义 ItemTemplate 的情况下,效果如下图所示: 其当前选中的项(红框内)与自定义的 ItemTemplate 一样: 但是 C1ComboBox 的非编辑状态(IsEditable="False"): 总感觉它的非编辑状态并没有完成,虽然数字和英文无法输入,但在红框内依旧可以输入中文文本(QQ拼音输入法的中文输入状态):并且在非编辑状态下并非像 Combobox 的非编辑状态可以显示自定义的 ItemTempl

MVC编辑状态两个DropDownList联动

前几天使用jQuery在MVC应用程序中,实现了<jQuery实现两个DropDownList联动(MVC)>http://www.cnblogs.com/insus/p/3414480.html .此次演练也是在此基础上进行. Insus.NET想在MVC编辑状态中实现两个DropDownList联动.这与前者没有多大区别,仅是一个在MVC的添加状态,另一个是在MVC编辑状态.后者最主要的是在MVC初次加载时,要把数据的值绑定至DropDownList的选项上. 这段时间,所做的MVC练习,

Ztree _ 横向显示子节点、点击文字勾选、去除指定元素input的勾选状态

前些天项目需要树结构表现数据,需求ztree就能满足所以直接使用ztree只是踩了些小坑... 1.ztree子节点横向显示(下图): 效果说明:第三级子节点按需求横向显示其他竖向显示,每行最多显示5个(修改位置在zTreeStyle.css里面哦,在外面设置不上的,页面也获取不到想要设置样式的节点...如果你能还望赐教)代码如下: 1 .ztree>li>ul>li>ul>li>ul{overflow:hidden;} 2 .ztree>li>ul>

ListView在编辑状态下不能获取修改后的值,无法更新数据

ListView在编辑状态下不能获取修改后的值,获取到的总是以前的值解决方法:在page_load事件里写: if(!IsPostBack) { ListViewBind(); } 原因:这涉及到aspx页各事件的执行顺序,因为如果没有判断IsPostBack,每次点更新时page_load都会去执行ListViewBind(),对ListView进行重新绑定,那你再去获取ListView里的值时当然就是以前的值了,这样写后ListView没有被重新绑定,里面的数据就还是以前的,所以就可以获取到