Django更新视图中JavaScript事件显示为文本的问题排查

我在Django应用中实现了添加发票的视图，嵌入的JavaScript交互功能运行正常，代码如下：

<p>
    <label for="id_total_without_vat">Price</label>
    <input type="number" name="total_without_vat" step="any" required="" id="id_total_without_vat" oninput="calculateTotalWithVat()">
    <label for="id_currency_name">Currency</label>
    <select name="currency_name" id="id_currency_name" onchange="update_currency_rate()">
        <option value="NIS">NIS</option>
    </select>
    <label for="units">Units</label>
    <span id="units"></span>
    <label for="id_currency_rate">Currency Rate</label>
    <input type="number" name="currency_rate" step="any" id="id_currency_rate" value=1.00 oninput="calculateTotalWithVat()">
    <label for="nis_total">Total Price</label>
    <span id="nis_total"></span>
</p>
<p>
    <label for="id_total_vat_included">Total VAT Included</label>
    <input type="number" name="total_vat_included" step="any" required="" id="id_total_vat_included">
    <label for="id_vat_percentage">VAT Perentage</label>
    <input type="number" name="vat_percentage" step="any" value="17.0" id="id_vat_percentage" oninput="updateVat(this.value)">
    <label for="nis_total_with_tax">NIS Total With Tax</label>
    <span id="nis_total_with_tax"></span>
</p>

但在实现类似的更新发票视图时，发现oninput等JavaScript事件属性在浏览器中被显示为纯文本，无法正常触发交互。更新视图的代码如下：

<p>
    <label for="id_total_without_vat">Total without VAT</label>
    {{ form.total_without_vat }}
    <label for="id_currency_name">Currency</label>
    <select name="currency_name" id="id_currency_name" onchange="update_currency_rate()">
         <option value=" {{ form.currency_name }} "></option>
    </select>
    <label for="units">Units</label>
    <span id="units"></span>
    <label for="id_currency_rate">Currency Rate</label>
    <input type="number" name="currency_rate" step="any" id="id_currency_rate" value= "{{ form.currency_rate }}" oninput="calculateTotalWithVat()">
    <label for="nis_total">Price</label>
    <span id="nis_total"></span>
</p>
<p>
    <label for="id_total_vat_included">Price Including VAT</label>
    {{ form.total_vat_included }}
    <label for="id_vat_percentage">VAT Percentage</label>
    <input type="number" name="vat_percentage" step="any" value=" {{ form.vat_percentage }} " id="id_vat_percentage" oninput="updateVat(this.value)">
    <label for="nis_total_with_tax">Price Including Taxes</label>
    <span id="nis_total_with_tax"></span>
</p>

问题原因分析 #

• 表单字段渲染丢失事件绑定：添加视图的输入框是手动编写的HTML标签，直接附带oninput等事件属性；但更新视图中使用{{ form.total_without_vat }}这类Django表单字段渲染时，默认只会生成基础输入框结构，不会自动添加你需要的交互事件属性，导致这两个输入框完全没有绑定JS逻辑。
• 下拉选单写法错误：更新视图里手动编写的<select>仅包含一个空<option>，且value值带有多余空格value=" {{ form.currency_name }} "，既无法正确显示当前选中的货币，还可能因值格式问题干扰update_currency_rate()函数执行，同时不符合Django表单渲染规范。
• 输入框value属性存在多余空格：currency_rate和vat_percentage的value值前后带有空格，比如value= "{{ form.currency_rate }}"，会导致浏览器解析初始值时出现异常，进而干扰oninput事件的触发逻辑。

解决办法 #

1. 通过表单Widget添加事件属性
   在Django表单类中，为对应字段的Widget添加事件属性，示例代码：

   class InvoiceForm(forms.ModelForm):
       class Meta:
           model = Invoice
           fields = ['total_without_vat', 'total_vat_included', 'currency_name', 'currency_rate', 'vat_percentage']
           widgets = {
               'total_without_vat': forms.NumberInput(attrs={
                   'oninput': 'calculateTotalWithVat()',
                   'step': 'any',
                   'required': ''
               }),
               'total_vat_included': forms.NumberInput(attrs={
                   'step': 'any',
                   'required': ''
               }),
               'currency_name': forms.Select(attrs={
                   'onchange': 'update_currency_rate()'
               })
           }
   

   之后在模板中直接使用{{ form.total_without_vat }}、{{ form.currency_name }}渲染字段，即可自动带上事件属性。

2. 修正下拉选单渲染方式
   删除手动编写的<select>和<option>，直接使用{{ form.currency_name }}，Django会自动渲染包含所有选项且选中当前值的下拉框。

3. 去除value属性的多余空格
   将value= "{{ form.currency_rate }}"修改为value="{{ form.currency_rate }}"，去掉前后空格，确保初始值被正确解析。

内容的提问来源于stack exchange，提问作者Daniel Ben-Shabtay