當數值大於50時，使數字輸入值顯示「∞」

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("-∞"); 
    } 
});