Django Form设置文本框为readonly操作

用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" >

以上这篇Django Form设置文本框为readonly操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Keras中 ImageDataGenerator函数的参数用法

    一.Keras ImageDataGenerator参数 from keras.preprocessing.image import ImageDataGenerator keras.preprocessing.image.ImageDataGenerator(featurewise_center=False, samplewise_center=False, featurewise_std_normalization = False, samplewise_std_normalization

  • PyQt5 控件字体样式等设置的实现

    一.API接口设置 比如我这段代码中的一些设置,设置文字.居中.禁止复制.LineEdit输入为password等等 import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import QFrame from PyQt5.QtWidgets import QLabel from PyQt5.QtWidgets import QWidget from PyQt5.QtWidgets import QLineEdit from PyQ

  • python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例

    PyQt5单行文本框控件QLineEdit介绍 QLineEdit类是一个单行文本框控件,可以输入单行字符串. QLineEdit类中常用的方法如下表 方法 描述 setAlignment() 按固定值方式对齐文本 Qt.AlignLeft:水平方向靠左对齐 Qt.AlignRight:水平方向靠右对齐 Qt.AlignCenter:水平方向居中对齐 Qt.AlignJustify:水平方向调整间距两端对齐 Qt.AlignTop:垂直方向靠上对齐 Qt.AlignBottom:垂直方向靠下对齐

  • keras的三种模型实现与区别说明

    前言 一.keras提供了三种定义模型的方式 1. 序列式(Sequential) API 序贯(sequential)API允许你为大多数问题逐层堆叠创建模型.虽然说对很多的应用来说,这样的一个手法很简单也解决了很多深度学习网络结构的构建,但是它也有限制-它不允许你创建模型有共享层或有多个输入或输出的网络. 2. 函数式(Functional) API Keras函数式(functional)API为构建网络模型提供了更为灵活的方式. 它允许你定义多个输入或输出模型以及共享图层的模型.除此之外

  • Keras 在fit_generator训练方式中加入图像random_crop操作

    使用Keras作前端写网络时,由于训练图像尺寸较大,需要做类似 tf.random_crop 图像裁剪操作. 为此研究了一番Keras下已封装的API. Data Augmentation(数据扩充) Data Aumentation 指使用下面或其他方法增加输入数据量.我们默认图像数据. 旋转&反射变换(Rotation/reflection): 随机旋转图像一定角度; 改变图像内容的朝向; 翻转变换(flip): 沿着水平或者垂直方向翻转图像; 缩放变换(zoom): 按照一定的比例放大或者

  • Django Form设置文本框为readonly操作

    用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()

  • jQuery简单设置文本框回车事件的方法

    本文实例讲述了jQuery简单设置文本框回车事件的方法.分享给大家供大家参考,具体如下: $(document).ready(function () { $("#txt_JumpPager").keydown(function (e) { var curKey = e.which; if (curKey == 13) { $("#lbtn_JumpPager").click(); return false; } }); }); 其中的txt_JumpPager为文本

  • javascript设置文本框光标的方法实例小结

    本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange

  • Django框架设置cookies与获取cookies操作详解

    Django框架设置cookies与获取cookies操作详解

    本文实例讲述了Django框架设置cookies与获取cookies操作.分享给大家供大家参考,具体如下: 在Django里面,使用Cookie和Session看起来好像是一样的,使用的方式都是request.COOKIES[XXX]和request.session[XXX],其中XXX是您想要取得的东西的key, 很久以前,写过一篇 django怎么处理session 的文章:django 自定义session 处理, 今天对cookies 进行了同样的操作: from django.temp

  • JQuery设置文本框和密码框得到焦点时的样式

    复制代码 代码如下: //设置文本框和密码框得到焦点时的样式 $("#tblReg input[type=text],#tblReg input[type=password]").focus(function () { $(this).addClass("myFocus"); }).blur(function () { $(this).removeClass("myFocus"); }); 注意中间用逗号隔开

  • C#实现windows form限制文本框输入的方法

    本文实例讲述了C#实现windows form限制文本框输入的方法.分享给大家供大家参考.具体分析如下: 这个例子告诉我们如何限制文本输入框,用户在Windows窗体应用程序中只有数字字符的输入.当用户开始在输入框中输入信息时,textBoxInput_keyPress被调用. 复制代码 代码如下: private void textBoxInput_KeyPress(object sender,KeyPressEventArgs e) {   const char Delete = (char

  • jquery对单选框,多选框,文本框等常见操作小结

    一.文本框.单选按钮.复选框.相关操作 复制代码 代码如下: var sex=$("input[name='sex']:checked").val();   //获取一组radio被选中项的值  var item=$("#sel option:selected").text();      //获取select被选中项的文本  var option_num=$('#sel').val();                 //获取select项目索引 $("

  • DOM基础教程之使用DOM设置文本框

    1.控制用户输入的字符个数 对于单行文本框和密码输入框,可以利用maxlength属性控制用户输入的字符个数. 对于多行文本,maxlength为自定义属性,其值最多输入的字符的个数,在onkeypress事件发生时则调运返回LessThan()函数返回值,函数如下 <textarea name="comments" id="comments" cols="40" rows="4" maxlength="50&

  • js设置文本框中焦点位置在最后的示例代码(简单实用)

    在火狐浏览器中直接使用this.focus();即可实现. 在IE中,在this.focus();之后再把文本框的值赋给文本框,焦点即在最后了.很简单哟!! 如: 复制代码 代码如下: var tar=document.getElementByIdx_x("name");if(tar.attachEvent){tar.attachEvent('onmouseover',focus(tar),false);}else{tar.addEventListener('mouseover',fo

  • jquery设置text的值示例(设置文本框 DIV 表单值)

    jquery设置内容 - text().html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容: text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML标记)val() - 设置或返回表单字段的值 下面的例子演示如何通过 text().html() 以及 val() 方法来设置内容: 实例 复制代码 代码如下: $("#btn1").click(function(){$("#test1").te

随机推荐