Django：使用带有 javascript 字符计数器/限制器的 textarea 小部件？答案

【问题标题】：Django: Using textarea widget with javascript character counter/limiter?Django：使用带有 javascript 字符计数器/限制器的 textarea 小部件？
【发布时间】：2011-05-16 04:17:43
【问题描述】：

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

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

否则，现在我只是在 html/js 中的模板中创建输入，然后将 POST 数据提交到 django 视图，并使用 getitem 检索它，然后将数据直接保存到我的楷模。这当然可行，但不是很 django'y，并且如果没有内置的 django 验证和清理数据功能，可能会在某种程度上易受攻击。

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

或者也许有人以前创建过这样的自定义表单小部件并且知道某个地方的好 sn-p？

干杯...

编辑所以感谢 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)

【问题讨论】：

标签： javascript django forms textarea widget

【解决方案1】：

(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() 并让它做你想做的事情。

(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 - 确保您的视图被登录用户访问，您需要在表单模板中使用csrf_token 和urlencode 您的数据（如果用户通过表单提交一些数据）。现在你可以走了......

【讨论】：

【解决方案2】：

这个 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>

【讨论】：