python - 将光标聚焦到输入值的末尾(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']
def __init__(self, *args, **kwargs):
...
super().__init__(*args, **kwargs)
self.fields['description'].widget.attrs['autofocus'] = 'on'
def clean(self):
...
return cleaned_data
def clean_inc_number(self):
""" Validate the INC Number is in the correct format """
inc_number = self.cleaned_data['inc_number']
if inc_number and not re.match(r'INC[0-9]+', inc_number):
raise forms.ValidationError("Format must be 'INC' followed by a number. For example: 'INC123456'")
return inc_number
def save(self, commit=True):
""" inject extra data """
...
return super().save(commit)
上图:self.fields['description'].widget.attrs['autofocus'] = 'on'
当定向到页面时,我如何将光标设置为第一个输入(描述)。
我的表单 html 只是将 {% form %} 与一些 Bootstrap 4 一起使用。功能按预期工作。但这就是为什么我无法将 onfocus 逻辑直接放在输入上的原因。
期望的行为:
在用户完成“描述”的输入后,点击“Tab”,光标移动到“inc_number”输入的“INC”(初始值)的末尾。(意图是他们不会删除“INC”,而是添加到它的末尾。
解决方案
包含小部件的widget.attrs
HTML 属性。您可以设置onfocus
属性,它必须是 JavaScript 函数。
所以它应该看起来像这样:
self.fields['inc_number'].widget.attrs['onfocus'] = 'this.setSelectionRange(..)
虽然我不确定这是否适用于任何地方 - 请参阅这篇文章:如何在 Google Chrome 中的输入文本末尾设置光标位置
推荐阅读
- ios - URLSession 使用内部回调在回退时重试连接
- mysql - MySQL 将数据附加到 JSON 数组中的每个 JSON 对象
- javafx - Java FX 使用 fxml 文件创建自定义对话框。如何设置或从中获取结果?
- asp.net - 模态弹出表单验证在 onclick 函数中不起作用
- inno-setup - 如何根据 Inno Setup 中的 Windows 版本添加/不添加卸载程序的快捷方式?
- node.js - 在生产环境中使用socket.io?
- vue.js - axios使用vue请求跨域错误
- flutter - Flutter如何添加选择选项
- python - 在 Django 数据库模型中创建一个数组字段
- php - 发布请求 Wordpress