【问题标题】:input with plus and minus controls to increase value alphabetical [closed]使用加号和减号控件输入以按字母顺序增加值[关闭]
【发布时间】:2015-04-13 07:47:20
【问题描述】:

你们中的许多人可能已经看到使用 - 1 + 这样的布局的表单,当单击 - 和 + 时,它会增加或减少值。我需要找到一种类似的方法,但使用字母,例如- A + 如果我单击 + 它将值设置为 B 如果我再次单击 + 它将值设置为 C 等.. 依此类推.减号也是如此,例如- C + 如果我点击 - 它应该将输入值设置为 B。

【问题讨论】:

  • @RamisWachtler 好吧,我想出了如何使用非常简单的数字来实现这一点,并考虑将数字分配给字母表中的字母,并根据增加的数字与相关字母更新输入,但是作为一种解决方案,似乎安静“笨重”。
  • @Ilya 您能否在您的帖子中提供代码使用jsfiddle.netjsbin.com
  • 这些领域的技术术语是 spinbox 或 spinner。除了指点你in the possibly right direction,我无能为力。

标签: javascript jquery html


【解决方案1】:

您可能想使用字符代码:

String.fromCharCode(value);

这是我的小提琴:http://jsfiddle.net/ThisIsMarkSantiago/73pza51f/

将字符代码解析为字符: http://www.w3schools.com/jsref/jsref_fromcharcode.asp

ASCII码在这里: http://www.w3schools.com/charsets/ref_html_ascii.asp

【讨论】:

    【解决方案2】:

    好的,这是一个有效的 sn-p。我修改了一个已经存在的代码,您可以在其中增加和减少数值。主要变化发生在这里 -

    将 char 转换为 int

    currentVal = currentVal.charCodeAt(currentVal);
    

    增量:检查 currentValue 是否未定义或小于 90(Z 的 ASCII)

    true - 使用String.fromCharCode(currentVal+1)) 增加整数并将其转换为字符。 false - 将输入字段的值设置为“A”

    if (!isNaN(currentVal) && currentVal < 90) {
      // Increment
      $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal + 1));
    } else {
      // Otherwise put a A there
      $('input[name=' + fieldName + ']').val("A");
    }
    

    减量:检查 currentValue 是否已定义或大于 65('A' 的 ASCII)

    true - 与增量相同,只是减量 false - 与增量相同,只需将“Z”设置为值

    if (!isNaN(currentVal) && currentVal > 65) {
      // Decrement one
      $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal - 1));
    } else {
      // Otherwise put a Z there
      $('input[name=' + fieldName + ']').val("Z");
    }
    

    jQuery(document).ready(function() {
      // This button will increment the value
      $('.qtyplus').click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = $('input[name=' + fieldName + ']').val();
        currentVal = currentVal.charCodeAt(currentVal);
        // If is not undefined or its less 90
        if (!isNaN(currentVal) && currentVal < 90) {
          // Increment
          $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal + 1));
        } else {
          // Otherwise put a A there
          $('input[name=' + fieldName + ']').val("A");
        }
      });
      // This button will decrement the value till Z
      $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = $('input[name=' + fieldName + ']').val();
        currentVal = currentVal.charCodeAt(currentVal);
        // If it isn't undefined or its greater than 65
        if (!isNaN(currentVal) && currentVal > 65) {
          // Decrement one
          $('input[name=' + fieldName + ']').val(String.fromCharCode(currentVal - 1));
        } else {
          // Otherwise put a Z there
          $('input[name=' + fieldName + ']').val("Z");
        }
      });
    });
    #myform {
      text-align: center;
      padding: 5px;
      border: 1px dotted #ccc;
      margin: 2%;
    }
    .qty {
      width: 40px;
      height: 25px;
      text-align: center;
    }
    input.qtyplus {
      width: 25px;
      height: 25px;
    }
    input.qtyminus {
      width: 25px;
      height: 25px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
    <form id='myform' method='POST' action='#'>
      <input type='button' value='-' class='qtyminus' field='quantity' />
      <input type='text' name='quantity' value='A' class='qty' />
      <input type='button' value='+' class='qtyplus' field='quantity' />
    </form>

    【讨论】:

      【解决方案3】:

      对于其他语言,我建议使用字典方法

      var otherLanguageAbc = ['a','á', 'b'];
      var count = 4;
      
      function getCharacter(otherLanguageAbc, count){
          var length  = otherLanguageAbc.length;
          var positiveCount = count < 0 ? count % length + length: count % length;
          return otherLanguageAbc[positiveCount];
      }
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-05-31
        • 1970-01-01
        • 1970-01-01
        • 2012-11-12
        • 2020-09-08
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多