Add autofocus support for input.html templates (#4650)

This change adds support to use `'autofocus': True` in the style options and have the `autofocus` attribute included on the input field when rendered.
This commit is contained in:
James Beith 2016-11-07 22:34:53 +11:00 committed by Tom Christie
parent 0b9304014d
commit befacfb00d
4 changed files with 6 additions and 6 deletions

View File

@ -108,7 +108,7 @@ Let's take a look at how to render each of the three available template packs. F
class LoginSerializer(serializers.Serializer): class LoginSerializer(serializers.Serializer):
email = serializers.EmailField( email = serializers.EmailField(
max_length=100, max_length=100,
style={'placeholder': 'Email'} style={'placeholder': 'Email', 'autofocus': True}
) )
password = serializers.CharField( password = serializers.CharField(
max_length=100, max_length=100,
@ -207,9 +207,9 @@ Field templates can also use additional style properties, depending on their typ
The complete list of `base_template` options and their associated style options is listed below. The complete list of `base_template` options and their associated style options is listed below.
base_template | Valid field types | Additional style options base_template | Valid field types | Additional style options
----|----|---- ----|----|----
input.html | Any string, numeric or date/time field | input_type, placeholder, hide_label input.html | Any string, numeric or date/time field | input_type, placeholder, hide_label, autofocus
textarea.html | `CharField` | rows, placeholder, hide_label textarea.html | `CharField` | rows, placeholder, hide_label
select.html | `ChoiceField` or relational field types | hide_label select.html | `ChoiceField` or relational field types | hide_label
radio.html | `ChoiceField` or relational field types | inline, hide_label radio.html | `ChoiceField` or relational field types | inline, hide_label

View File

@ -6,7 +6,7 @@
{% endif %} {% endif %}
<div class="col-sm-10"> <div class="col-sm-10">
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}> <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %} {% for error in field.errors %}

View File

@ -5,5 +5,5 @@
</label> </label>
{% endif %} {% endif %}
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}> <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
</div> </div>

View File

@ -3,7 +3,7 @@
<label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label> <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
{% endif %} {% endif %}
<input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}> <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
{% if field.errors %} {% if field.errors %}
{% for error in field.errors %} {% for error in field.errors %}