Question

当输入的数字超过50时，如何使用值为∞的输入类型文本替换字段，当再次减去51应该反向处理到显示数字时。有可能实现吗？当无穷大值时我需要例如值为51的隐藏字段来理解服务器端发送后的数据。我的死测试如下。

jquery的：

$("#order_quantity").live("change",function() {
    var tempField;
    if($(this).val() > 50) {
        $('<input type="text"/>').val("∞").appendTo("#order_quantity");
        tempField = $('<input type="hidden" name="order[quantity]" type="number" />').val(this).appendTo("#order_quantity");
    }else{
        tempField.remove();
        $('<input name="order[quantity]" type="number" />').val(this).appendTo("#order_quantity");
        $("body").append("<br>50<br>");
    }
});

HTML：

<input id="order_quantity" type="number" value="1" size="30" name="order[quantity]" min="0" max="51">

Answer 1

解决数字框限制的一种方法是有条件地显示或隐藏包含最大值指示符的标签和输入字段中的文本。

这是一个jsfiddle示例：http://jsfiddle.net/CWq8D/

HTML：

Input has a max limit of 250, but displays '∞' after 50:
<input id="order_quantity" type="number" value="1" size="30" name="order[quantity]" min="0" max="250">
<br/>
Input has no max, but displays a '10+' after 10:
<input id="other_quantity" type="number" value="1" size="30" name="other[quantity]" min="0">

jquery.maxDisplay.js：

$.fn.maxDisplay = function( max, max_display ) {
  return this.each( function() {
    var $input = $( this );

    // Create a label that will position itself ontop of the input field.  The
    // label's text display will default to 'max+'.
    var $label = $('<label>');
    $label.html( max_display ? max_display : '' + max + '+')
          .css({ position : "absolute",
                 left     : "6px",
                 top      : "3px" });

    // Wrap the input in a div with relative position so that the label can be
    // positioned via absolute.
    $input.wrapAll( '<div style="position: relative;">' );

    // Insert label before the input.
    $input.before( $label );

    // Store off the input's text color.
    var color = $input.css( 'color' ); 

    function hide_label() {
      // If the label is already hidden, just return early.
      if ( !$label.is(':visible') ) return;
      $label.hide();

      // Reset the text color so that it is visible.
      $input.css({ color: color });
    };

    function show_label() {
      // If the label is already visible, just return early.
      if ( $label.is(':visible') ) return;

      $label.show();

      // The color property does not support transparent, so mimic this by
      // matching the background color.
      $input.css({ color: $input.css( 'background-color' ) });
    };

    // Control when the label is displayed.
    function display_label() {
      if ( max >=  $input.val()) {    
        hide_label()
      }
      else {
        show_label();
      }
    };

    // Invoke to set initial display.
    display_label();

    // Bind to events.
    $input.change( display_label ) // Display label based on value.
          .focus( hide_label )     // Hide label if input is focused.
          .blur( display_label );  // Hide/show label when input loses focus.

    // The label is sitting over the input field, so have its click behavior
    // mimic that of the input.
    $label.click( function() {
      hide_label();
      $input.focus();
    });
  });
};

用法：

// Apply max display to the input divs.
$("#order_quantity").maxDisplay( 50, "∞" );
$("#other_quantity").maxDisplay( 10 );

Answer 2

将输入类型更改为text可能会帮助您^ _ ^

试试这个：http://jsfiddle.net/maniator/dpsMa/

代码：

$("#order_quantity").live("change", function() {
    if (this.value > 50) {
        $(this).val("∞");
    } else if (this.value < -50) {
        $(this).val("-∞");
    } 
});

当值大于50时，使数字输入值显示“∞”

2 个答案: