Rails number_field with delimiter

时间:2018-02-05 16:02:54

标签: ruby-on-rails forms

此标记不会显示我的号码(因为逗号不是数字):

<%= number_field_tag 'name', number_with_delimiter(number, delimiter: ','), min: 0 %>

这将:

<%= number_field_tag 'name', number, min: 0 %>

我知道我可以使用text_field:

<%= text_field_tag 'name', number_with_delimiter(number, delimiter: ','), min: 0 %>

但我喜欢使用number_field将输入限制为仅数字,并将实际值保持为数字。

任何方式来获得我想要的一切?

  • number_field_tag显示分隔符,实际值没有分隔符
  • text_field_tag,用于约束数字输入,带分隔符显示,实际值不带分隔符

我可以使用一些JS来做到这一点,但是,有轨道方式吗?

1 个答案:

答案 0 :(得分:1)

我对Rails内置方法没有这么认为,但我有一个想法,并且在没有为许多搜索找到合适的解决方案时我已经使用过。

<%= text_field_tag :name, class: "form-control", maxlength: "11", placeholder: "2,00000" %>

将text_field保留在输入字段中,然后在js code

下面添加
$(function() {
    var $form = $( "#form_id" ); // Your form id
    var $input = $form.find( "#input_field_id" ); // Input field ID which you need number with delimiter

        $input.on( "keyup", function( event ) {
        // When user select text in the document, also abort.
        var selection = window.getSelection().toString();
        if ( selection !== '' ) {
            return;
        }
        var $this = $( this );
        // Get the value.
        var input = $this.val();

        var input = input.replace(/[\D\s\._\-]+/g, "");
            input = input ? parseInt( input, 10 ) : 0;

            $this.val( function() {
                return ( input === 0 ) ? "" : input.toLocaleString( "en-US" );
            } );
    } );
});

现在输入字段不支持任何文本或零或仅特殊字符编号。

您可以根据您的要求进行修改,例如输入多少数字而不是支持减号或零。

现在它可以使用分隔符发送数字,你可以使用像

这样的befor_save方法修改它
class Model < ApplicationRecord
   before_save {self.name = self.name.gsub(/[\s,]/ ,"")}
end

查看控制台

cd = Model.new(name: "1,3,4,3,2")
=> #<Model id: nil, name: "1,3,4,3,2", created_at: nil, updated_at: nil> 
cd.save
SQL (0.5ms)  INSERT INTO "tables" ("name", "created_at", "updated_at") VALUES (?, ?, ?)  [["name", "13432"], ["created_at", "2018-02-06 04:00:00.851630"], ["updated_at", "2018-02-06 04:00:00.851630"]]
(13.2ms)  commit transaction
 => true  

就是这样

希望有所帮助