Django Form设置文本框为readonly操作
作者:939397232 时间:2023-11-11 03:03:43
用Django开发网站的时候,前端页面内的文本框总是不能被设置为只读,找了一些资料发现可以在form class里面进行设置。
方法一:
首先在自己创建的form.py文件中创建一个my_info_form 类:
** In form.py file **
""" 1. 利用Django form创建自己需要的表单 """
class my_info_form(forms.Form):
user_id = forms.IntegerField()
user_name = forms.CharField(max_length=254)
email = forms.EmailField()
""" 上面的这一小段代码就可以在页面上显示出一个表格, 但是表格里面的文本框IntegerField, CharField, EmailField都处于可编辑状态。
大多数情况下我们不想要用户可以随意更改页面展示的内容,所以需要对这些文本框进行设置来改变可编辑状态。
代码如下: """
def __init__(self, *args, **kwargs):
super(forms.Form, self).__init__(*args,**kwargs)
self.fields['user_id'].widget.attrs['readonly'] = True
self.fields['user_name'].widget.attrs['readonly'] = True
self.fields['email'].widget.attrs['readonly'] = True
""" 编写__init__()方法,
首先, 要调用super(forms.Form, self).__init__(*args,**kwargs), 注意这里的__init__()方法里没有self。*args会传递要展示的信息, **kwargs会传递改变文本框格式的信息。 如果不调用super方法, 会报no fields 错误。
第二, 更改文本框编辑状态:
self.fields['user_id'].widget.attrs['readonly'] = True
self.fields['user_name'].widget.attrs['readonly'] = True
self.fields['email'].widget.attrs['readonly'] = True
第三, 试着运行一下, 你会发现文本框已经不能进行编辑了!
"""
方法二:
"""
在创建文本框的时候实用Django的widget 设置文本框的属性为 readonly
"""
class my_info_form(forms.Form):
user_id = forms.IntegerField(widget=forms.TextInput(attrs={'readonly': 'readonly'}))
user_name = forms.CharField(widget=forms.TextInput(attrs={'readonly': 'readonly'}))
email = forms.EmailField(widget=forms.TextInput(attrs={'readonly': 'readonly'}))
补充知识:将input标签设置为不可编辑状态的三种方法
一:disabled
disabled 属性规定应该禁用 input 元素,被禁用的 input 元素,不可编辑,不可复制,不可选择,不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 <input type="hidden"> 一起使用。
示例:
<input type="text" disabled="disabled" />
二:readonly
readonly 属性规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。
示例:
<input type="text" readonly="readonly">
三:readonly unselectable="on"
readonly unselectable="on" 该属性跟disable类似,input 元素,不可编辑,不可复制,不可选择,不能接收焦点,设置后文字的颜色也会变成灰色,但是后台可以接收到传值。
示例:
<input type="text" readonly unselectable="on" >
来源:https://blog.csdn.net/oolocal/article/details/52823403
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
php控制文件下载速度的方法
python redis连接 有序集合去重的代码
Python基于locals返回作用域字典
windows系统mysql压缩包版本安装过程
![](https://img.aspxhome.com/file/2023/6/122876_0s.png)
详解git合并冲突解决方法
Ethnique公司logo设计过程和思路
![](https://img.aspxhome.com/file/UploadPic/20099/19/01-79s.jpg)
Python实现复制图片到指定文件夹并按顺序重新命名
![](https://img.aspxhome.com/file/2023/4/72194_0s.png)
matplotlib绘制鼠标的十字光标的实现(自定义方式,官方实例)
Dreamweaver MX打造弹出“向导”
![](https://img.aspxhome.com/file/UploadPic/20071/200713110227823s.jpg)
微信小程序实现登陆注册滑块验证
![](https://img.aspxhome.com/file/2023/7/56127_0s.jpg)
asp如何取回已忘记的密码?
在Sql Server中调用外部EXE执行程序引发的问题
让验证码友好一点
![](https://img.aspxhome.com/file/UploadPic/200710/20/20071020135017833s.gif)
vue2.0开发实践总结之疑难篇
![](https://img.aspxhome.com/file/2023/8/130238_0s.jpg)
javascript制作loading动画效果 loading效果
![](https://img.aspxhome.com/file/2023/4/56224_0s.gif)
ACCESS模糊查询出现"内存溢出"
对python中return与yield的区别详解
asp.net生成Excel并导出下载五种实现方法
![](https://img.aspxhome.com/file/2023/9/77189_0s.jpg)
python 命令行传参方法总结
数据库查询优化之子查询优化
![](https://img.aspxhome.com/file/2023/4/97994_0s.png)