使用带有按键事件的原型函数

Question

我想编写 ajax 原型函数，在为多个输入数据在公式中键入每个字符后将其转换为大写。

jQuery.fn.doKeyUpToUpper = function() {
    $(this).val($(this).val().toUpperCase());
}

并将此函数与字段相关联：

$('#First').doKeyUpToUpper();
$('#Second').doKeyUpToUpper();
$('#Third').doKeyUpToUpper();

其中第一、第二和第三是

<input id=First value="" />
<input id=Second value="" />
<input id=Third value="" />

输入字段...

很遗憾，我不知道如何为每个字段添加 keyup 事件。

有人帮忙吗？谢谢

Answer 1

你一路走好。但只定义了 "keyup" 上的行为，并没有实际设置事件。

jQuery.fn.doKeyUpToUpper = function () {
  $(this).on('keyup', function () {
    $(this).val($(this).val().toUpperCase());
  });
};

// or a more dynamic alternative
jQuery.fn.toUpperOn = function (event) {
  $(this).on(event, function () {
    $(this).val($(this).val().toUpperCase());
  });
};

// based upon the question in the comments
jQuery.fn.toUpperOn = function (event, callback) {
  $(this).on(event, function () {
    $(this).val($(this).val().toUpperCase());
    if (callback) callback.apply(this, arguments);
  });
};

$("#first").doKeyUpToUpper();
$("#second").toUpperOn('keyup');
$("#third").toUpperOn('keyup', function (event) {
  console.log(this.id, this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="first" type="text" />
<input id="second" type="text" />
<input id="third" type="text" />

查看 jQuery.on 文档了解更多详细信息。

使用带有按键事件的原型函数

Using prototype function with key event

javascript

ajax

prototype

keyup

onkeyup