将光标聚焦到输入值的末尾(CreateView、ModelForm)

我有一个带有 2 个输入的表单。我正在使用 CreateView 和 ModelForm。还有 {% form %}。


问题:


当“选项卡”到时,我需要第二个输入(已经有一个初始值),以将光标放在字符串的末尾。

当前行为:

当“制表符”进入第二个输入时,它会突出显示整个字符串。


到目前为止我所拥有的:

我可以通过将这行代码添加到我的 ModelForm init: 来自动对焦 self.fields['description'].widget.attrs['autofocus'] = 'on'。


我在想这样的事情:( self.fields['inc_number'].widget.attrs['onfocus'] = 'INC'[:0] “INC 是初始值)可能会解决问题。我没有收到任何错误,但是当我从描述输入中选择时,它仍然只是突出显示整个字符串。


对于我的代码,我将尝试只关注最相关的部分。


模型.py


class ITBUsage(models.Model):

    """ ITB usage """


    itb = models.ForeignKey(IncidentTriageBridge, related_name='itb',

                            on_delete=models.DO_NOTHING, verbose_name="ITB name")

    description = models.CharField(max_length=100, verbose_name="Description", null=True)

    inc_number = models.CharField(max_length=20, verbose_name="Incident number", null=True)

    ...

视图.py


class StartItb(CreateView):

    # class StartItb(CreateView):

    """ Start a bridge by adding a new row in ITBUsage """

    model = models.ITBUsage

    form_class = forms.StartItbForm

    template_name = "itb_tracker/start_form.html"


    initial = {'inc_number': "INC"}  # prefill INC for user


    def get_form_kwargs(self):

        """ inject the extra data """

        kwargs = super().get_form_kwargs()

        ...

        return kwargs 


    def form_valid(self, form):

        ...

        return super().form_valid(form)


上图:initial = {'inc_number': "INC"}这就是我目前将“INC”输入到输入中的方式


表格.py:


class StartItbForm(forms.ModelForm):

    """ Start a bridge by adding a for in ITBUsage """


    class Meta:

        model = models.ITBUsage

        fields = ['description', 'inc_number']


上图:self.fields['description'].widget.attrs['autofocus'] = 'on'当定向到页面时,我如何将光标设置为第一个输入(描述)。


我的表单 html 只是将 {% form %} 与一些 Bootstrap 4 一起使用。功能按预期工作。但这就是为什么我无法将 onfocus 逻辑直接放在输入上的原因。


期望的行为:

在用户完成“描述”的输入后,点击“Tab”,光标移动到“inc_number”输入的“INC”(初始值)的末尾。(意图是他们不会删除“INC”,而是添加到它的末尾。


临摹微笑
浏览 101回答 2
2回答

炎炎设计

包含小部件的widget.attrsHTML 属性。您可以设置onfocus属性,它必须是 JavaScript 函数。所以它应该看起来像这样:self.fields['inc_number'].widget.attrs['onfocus'] = 'this.setSelectionRange(..)虽然我不确定这是否适用于任何地方 - 请参阅这篇文章:如何在 Google Chrome 中的输入文本末尾设置光标位置

红糖糍粑

因此,基于“rje”的帮助,这就是我为解决问题所做的。我不需要在视图中设置初始值。但取而代之self.fields['inc_number'].initial = "INC"的是形式。这样我就可以获得长度(而不是硬编码为 3)。length = len(self.fields['inc_number'].initial).解决方案线是self.fields['inc_number'].widget.attrs['onfocus'] = 'this.setSelectionRange(length, length)'
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Python