Django:使用带有javascript字符计数器/限制器的textarea小部件?

时间:2010-11-26 12:32:22

标签: javascript django forms textarea widget

我正在尝试使用textarea表单条目,我有一些javascript代码来计算和限制字符数,其max_length和size是动态的(即这些属性在模型创建后可以更改)。

为了在django form textarea小部件中包含此功能,我想我必须创建一个自定义小部件,虽然我不确定如何真正地绑定模板中的javascript代码。为了更改textarea大小,我想我会从视图中将变量传递给表单创建,以生成textarea小部件实例。

否则现在我只是在html / js中创建模板中的输入,然后将POST数据提交到django视图,并使用 getitem 检索它,然后将数据直接保存到我的楷模。当然哪个工作,但不是非常django'y,如果没有内置的django验证和干净的数据功能,也许在某种程度上是脆弱的。

我猜两个问题:(a)如果我创建自定义django表单小部件,如何将我的javascript函数应用于模板中的textarea字段(包括“onkeypress = jstextcounter .. 。“)和(b)如果我继续只是在没有django表单的情况下检索视图中的帖子数据,是否存在漏洞,我该怎么做才能确保数据得到充分验证? (页面已经要求用户登录,而不是公共评论框)

或者有人之前创建过这样的自定义表单窗口小部件并知道某个好的代码片段?

干杯...

修改 所以感谢MovieYoda的帮助,我得到了这个工作,并在django中阅读了dynamic forms。使用%d替换,我可以动态更改我的js函数的maxChars属性。

在forms.py中我有:

text=forms.CharField(max_length = 1000, widget=forms.widgets.Textarea())

def __init__(self, *args, **kwargs):
     size = kwargs.pop('size')
     maxChars = kwargs.pop('maxChars') 
     super(MyForm, self).__init__(*args, **kwargs)
     self.fields['text'].widget.attrs['onkeypress'] = 'return textCounter(this, this.form.counter, %d);' % maxChars
     self.fields['text'].widget.attrs['rows'] = size
     self.fields['text'].widget.attrs['cols'] = '40'

模板中的js函数'textCounter'使用maxChars变量限制字符数。

<script type="text/javascript">

function textCounter( field, countfield, maxLimit) {
  if ( field.value.length > maxLimit )
  {
    field.value = field.value.substring( 0, maxLimit );
    return false;
  }
  else
  { 
    countfield.value = maxLimit - field.value.length;
  }
}
</script>

在视图中创建带有kwargs输入的表单:

FormInstance = MyForm(size=1, maxChars=5)

2 个答案:

答案 0 :(得分:6)

  

(a)如果我创建自定义django表单小部件,我该如何应用我的javascript   函数到textarea字段中   模板(包括   “onkeypress = jstextcounter ...”)和

从我能够理解的你想要在表单元素上定义javascript处理程序?以下是人们如何处理这个问题 -

在forms.py

class Search(forms.Form):
 se=forms.CharField(widget=forms.TextInput(attrs={'onClick':'return jscode();'}))

现在像往常一样渲染表单。在你的js文件中,编写这个处理函数jscode()&amp;让它做你想做的事。

  

(b)如果我继续只是在视图中检索帖子数据而没有   django形式,是否存在漏洞   我该怎么做才能确保   数据经过充分验证?

第二部分也可以轻松处理。在forms.py文件中,定义要为其执行某些数据验证的这些成员函数。你可以这样做 -

class Search(forms.Form):
 se=forms.CharField(widget=forms.TextInput(attrs={'onClick':'return jscode();'}))
 def clean_se(self):
    #do your validaton here. In case of error raise ValidationError.
    raise forms.ValidationError('Passwords do not match.')

注意干净的fn。应该采用这种格式 - clean_<field_to_be_cleaned>。这是se。所以...

除了确保@login_required - 确保登录用户访问您的视图外,您还需要在表单模板&amp;中使用csrf_tokenurlencode您的数据(如果用户通过表单提交一些数据)。现在你很高兴......

答案 1 :(得分:1)

这个jQuery library做你想要的。它向用户显示他们剩余的字符数以及限制输入。

下载并引用库here并使用以下代码进行调用:

<script type="text/javascript">
    $(document).ready(function () {
        $("#textarea1").CharacterCount({
            charactersRemainingControlId: "remainingCount1"
        });
    });
</script>       

<textarea id="textarea1" name="textarea1" cols="20" rows="3" maxlength="10"></textarea>

The number of characters left is: <span id="remainingCount1">0</span>