Cách chỉ tạo một trường dạng số ở Django

Question

Trong khi sử dụng các kiểu mẫu Django, tôi có một trường số Trường số nguyên chỉ là số. Nhưng trong trình duyệt, nó xuất hiện dưới dạng trường văn bản, trong đó tôi có thể nhập "ký tự". Tôi muốn làm điều này chỉ "số". Làm như thế nào ? tức là người dùng sẽ chỉ có thể nhập số.

Chúng tôi có thể thực hiện theo cách này bằng cách đặt thuộc tính của trường.

1)

def __init__(self,*args,**kwargs): 

     super(PropertyForm,self).__init__(*args, **kwargs)   
     self.fields['brokers_phone_number'].widget.attrs['type'] = "number" 

này dường như không làm việc. Tôi đang sử dụng html 5 và trình duyệt là Chrome. Tôi đang làm gì sai? Làm thế nào nó có thể được thực hiện tốt hơn?

Answer 1

Cuối cùng, tôi đã sử dụng giải pháp dựa trên jQuery. Question here. Thay vì thêm kiểu tôi đã thêm một lớp "số" và thêm xác nhận số jquery vào nó. Nhưng đây là một giải pháp hackish, đặc biệt là khi chúng tôi có html 5 "số" tại chỗ. Nếu có ai tìm cách để làm điều này, hãy trả lời.

Trong hình thức:

def __init__(self,*args,**kwargs): 
    super(PropertyFloorForm, self).__init__(*args, **kwargs) 
    self.fields['number_of_units'].widget.attrs['class'] = "number" 

Trong mẫu

$(document).ready(function() { 
    $(".number").keydown(function(event) { 
     // Allow: backspace, delete, tab, escape, and enter 
     if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
      // Allow: Ctrl+A 
      (event.keyCode == 65 && event.ctrlKey === true) || 
      // Allow: home, end, left, right 
      (event.keyCode >= 35 && event.keyCode <= 39)) { 
      // let it happen, don't do anything 
      return; 
     } else { 
      // Ensure that it is a number and stop the keypress 
      if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) { 
       event.preventDefault(); 
      } 
     } 
    }); 
}); 

Answer 2

Django 1.6 có một Widget NumberInput, nhưng 1.6 hiện không ổn định.

Nhưng bạn có thể thử một cái gì đó như thế này:

from django.forms import ModelForm, CharField, TextInput 

class PropertyForm(ModelForm): 

    brokers_phone_number = CharField(widget=TextInput(attrs={'type':'number'})) 

    class Meta: 
    ... 

Answer 3

Dưới đây là một giải pháp:

• Thêm xác nhận trong file mô hình
• Thêm lớp css cho các trường trong các hình thức mô hình
• Sử dụng jquery để thay đổi loại của lớp trên thành 'number' trên tài liệu/tải trang

TRONG MODEL:

exp_from = models.IntegerField(default=0, 
     validators=[ 
      MaxValueValidator(100), 
      MinValueValidator(0) 
     ]) 

    exp_to = models.IntegerField(default=1, 
     validators=[ 
      MaxValueValidator(100), 
      MinValueValidator(1) 
     ]) 

TRONG MẪU MODEL - thêm một lớp jquery

self.fields['exp_from'].widget.attrs['class'] = "text_type_number" 
self.fields['exp_to'].widget.attrs['class'] = "text_type_number" 

TRONG FILE HTML/JS FILE

$(document).ready(function(){ 
    $('.text_type_number').attr('type', 'number'); 
}); 

Answer 4

Tôi biết đây là một faily chủ đề cũ, đang thêm điều này cho hậu thế

Để có được vòng vấn đề này lưu sau đây như html5type.py

from django import template 
register = template.Library() 
def html5type(var): 
    if isinstance(var, int): 
     return 'number' 
    else: 
     return 'text' 

register.filter('html5type', html5type) 

Sau đó, trong mẫu:

{% load html5type %} 
<input type={{ field.value | html5type }} ></input> 

Tất nhiên bạn có thể mở rộng chức năng html5type hơn nữa với nhiều loại khác

Nên biết trước: lĩnh vực Numeric cần một giá trị mặc định cho ở trên để làm việc

Answer 5

Thay vì RegexValidator, hãy xác thực trong các thuộc tính biểu mẫu chỉ ...

class StaffDetailsForm(forms.ModelForm): 
    number = forms.CharField(required=True,widget=forms.TextInput(attrs={'class':'form-control' , 'autocomplete': 'off','pattern':'[0-9]+', 'title':'Enter numbers Only '})) 

và cứ thế ...

Khác bạn sẽ phải xử lý lỗi trong chế độ xem. Nó làm việc cho tôi thử phương pháp đơn giản này ... Điều này sẽ cho phép người dùng chỉ nhập số Chỉ