Question

我有一个表格，它是来自django-two-factor-auth-library的PhoneNumberForm的子类。它会显示一个文本框，在其中输入电话号码，并在其下方显示“后退”按钮和“下一步”按钮。问题是，当表单填写完毕并且用户点击“输入”表格时键盘上的键，触发后退按钮。

我尝试过交换两个按钮，这给了我想要的行为，但不是正确的布局。但我确实看到在按Enter键时，在FormActions中首先定义的按钮被选中。

我也试过添加一个＆＃39;自动对焦＆＃39;字段到我的下一个按钮，但只在页面加载时关注按钮，而不是在我将焦点切换到文本框并键入数字后。

我想维护我目前的订单（左侧的Back按钮，右侧的Next），但是按Enter键会触发Next按钮。我该怎么做？

from crispy_forms.helper import FormHelper
from crispy_forms import layout as crispy
from crispy_forms import bootstrap as twbscrispy


def __init__(self, **kwargs):
    super(PhoneNumberForm, self).__init__(**kwargs)
    self.helper = FormHelper()
    self.helper.form_class = 'form form-horizontal'
    self.helper.label_class = 'col-sm-3 col-md-4 col-lg-2'
    self.helper.field_class = 'col-sm-9 col-md-8 col-lg-6'
    self.helper.layout = crispy.Layout(
        crispy.Fieldset(
            '',
            'number'
        ),
        twbscrispy.FormActions(


            twbscrispy.StrictButton(
                _('Back'),
                css_class='btn-default',
                type='submit',
                value='method',
                name='wizard_goto_step',
            ),



            twbscrispy.StrictButton(
                _('Next'),
                css_class='btn-primary',
                type='submit',
            )



        )
    )

Answer 1

您的浏览器正在使用＆lt; Enter＆gt;对于表单中类型 =“提交”的第一个按钮。

如果您将“后退”按钮键入更改为“按钮”，则“下一步”按钮将成为表单中的第一个提交按钮，并且＆lt;输入＆GT;会激活它。

如果使用“onclick”属性，您仍然可以使用“后退”按钮提交表单，并为表单提供“id”属性。

e.g。

# ...
self.helper = FormHelper()
self.helper.form_id = 'wizard_form_id'
# ...
twbscrispy.StrictButton(
    _('Back'),
    css_class='btn-default',
    type='button',
    value='method',
    name='wizard_goto_step',
    onclick="document.getElementById('wizard_form_id').submit();",
),
twbscrispy.StrictButton(
    _('Next'),
    css_class='btn-primary',
    type='submit',
)

制作＆＃39;输入＆＃39;键默认为Django crispy形式的某个按钮？

1 个答案: