使用加号和减号控件输入以按字母顺序增加值

时间:2015-02-12 14:17:46

标签: javascript jquery html

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

3 个答案:

答案 0 :(得分:1)

您可能想要使用字符代码:

String.fromCharCode(value);

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

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

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

答案 1 :(得分:1)

好的,这是一个工作片段。我修改了现有的代码,您可以在其中增加和减少数值。主要变化发生在这里 -

将char转换为int

currentVal = currentVal.charCodeAt(currentVal);

INCREMENT:检查currentValue是否未定义或更少90(Z为ASCII)

true - 使用String.fromCharCode(currentVal+1))增加整数并将其转换为char。 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");
}

DECREMENT:检查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>

答案 2 :(得分:0)

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

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];
}