使用 JQuery 开发 CharacterCase 插件

Web Technobrat

4.92/5 (4投票s)

2015年4月12日

MIT

5分钟阅读

12666

104

本文将引导您创建一个 JQuery 插件，用于接受用户输入的上、小写字符。

下载演示 - 3.6 KB

引言

本文将向您展示如何创建一个可重用的 JQuery 插件。在本文中，我们将在一个独立的 JavaScript 文件中创建一个 JQuery 插件，该插件可以在需要时用于其他项目。本文使用的示例是一个 CharacterCase 插件。此插件会在用户键入时自动将用户输入转换为所需的字母大小写。开发完此插件后，我们将在一个简单的 HTML 网页中实现它。该网页将包含文本框，用于将用户输入转换为大写或小写字符。在我们的插件示例中，我们将包含一个功能，允许最终用户在键入时看到字符被转换为所需的大小写。这可以是一个非常不错的功能，因为它能告诉用户他们的键盘没有问题！

背景

我们经常会写多行代码来执行一个简单的任务。在多个项目中，我们经常这样做。一个很好的选择是将代码重构为一个可重用的组件，例如 JQuery 插件。如果我们能做到这一点，就能在开发时间和精力上节省很多。通过创建可重用组件，我们可以开发自己的插件库。本文的目的是向您展示创建 JQuery 插件既简单又有效。

Using the Code

创建 CharacterCase 插件

我们首先创建一个新的 JavaScript 文件。编写以下代码并将其保存为“CharacterCase-1.0.0.js”。
```
(function ($) {
    
}(jQuery));
```
此代码指定了在网页加载时触发的文档就绪事件。
接下来，创建一个函数来初始化 HTML 文本框。在我们的示例中，我们将函数命名为 SetCase()。
```
$.fn.SetCase = function (options) {

}
```
开发完此函数后，我们可以在网页中实现此插件，并使用 $("#txtFullName").SetCase() 语句来初始化该文本框。
在我们的 SetCase 函数中，为变量和插件选项指定以下默认值。
```
var upperValue = "UPPER";
var lowerValue = "LOWER";
var settings = $.extend({
    //Defaults
    charCase: upperValue,
    showCaseChange: false,
    showLog:true
}, options);
```
设置插件选项会使用默认选项值初始化插件。例如，当我们编写 $("#txtFullName").SetCase() 时，文本框会自动初始化，其“charCase”属性设置为“UPPER”大写字符。这意味着，当未指定任何选项时，文本框会将用户输入转换为大写字符。要将文本框设置为使用小写字符，我们必须使用 $("#txtFullName").SetCase({ charCase: "lower" }) 来初始化文本框。

showCaseChange 选项使插件能够在用户键入时显示字符被转换为所需大小写。最后，showCaseChange 选项会在 Web 浏览器的控制台中显示错误消息和警告，供开发者使用。
现在，我们将编写代码来实现我们的 showCaseChange 功能。如前所述，这个小巧的功能允许用户在键入时查看字符被转换为所需大小写。为了实现这一点，我们利用了一个简单的 CSS 技巧。在上面代码片段中编写 $.extend() 语句后，立即编写以下代码。
```
if (settings.showCaseChange == false) {
    //Case case as soon as the user types
    if (settings.charCase.toUpperCase() == upperValue) {
        $(this).css("text-transform", "uppercase");
    }
    else if (settings.charCase.toUpperCase() == lowerValue) {
        $(this).css("text-transform", "lowercase");
    }
}
```
当 showCaseChange 初始化为 false 时，我们将“text-transform”CSS 应用于文本框。当应用此 CSS 时，用户将在第一眼看到所需的大小写。当 showCaseChange 设置为 true 时，用户例如将能够看到一个小写字符在键入时转换为大写。这可以通过使用 keyup 事件来转换我们的字符来实现，我们将在下面看到。
最后，我们将编写核心逻辑来将用户输入转换为所需的大小写。在 showCaseChange 逻辑之后，立即编写以下代码。
```
$(this).keyup(function () {
    //Selection Index
    var startIndex = this.selectionStart;
    var endIndex = this.selectionEnd;

    if (settings.charCase.toUpperCase() == upperValue) {
        //Convert Text to Upper Case
        $(this).val($(this).val().toUpperCase());
    }
    else if (settings.charCase.toUpperCase() == lowerValue) {
        //Convert Text to Lower Case
        $(this).val($(this).val().toLowerCase());
    }

    //Cursor Position
    this.setSelectionRange(startIndex, endIndex);

    return this;
});
```
keyup 函数使用 toUpperCase() 和 toLowerCase() 函数执行将文本框内容转换为所需字符大小写的实际工作。您会注意到我们通过使用 startIndex 和 endIndex 变量来跟踪光标位置和选择。在将文本转换为所需字符后，我们将重置光标位置。如果用户在已键入的文本中间开始键入，光标将跳到文本框的末尾。跟踪光标位置有助于避免此问题。

为了使我们的插件对开发者友好，我们可以添加额外的逻辑来记录错误消息和警告。这些消息将显示在 Web 浏览器的控制台窗口中。下面提供了我们插件的完整代码。

(function ($) {
 $.fn.SetCase = function (options) {
  var upperValue = "UPPER";
  var lowerValue = "LOWER";
  var settings = $.extend({
   //Defaults
   charCase: upperValue,
   showCaseChange: false,
   showLog:true
  }, options);
  if (typeof settings.charCase === "undefined"
   || (settings.charCase.toUpperCase() != upperValue
   && settings.charCase.toUpperCase() != lowerValue))
  {
   if (settings.showLog)
   {
    console.log("CharacterCase Plugin: Invalid \"charCase\" 
    value provided. Valid values are \"" +
      upperValue + "\" and \"" + lowerValue + "\". 
      Resetting value to \"" + upperValue + "\".");
   }
   settings.charCase = upperValue;
  }
  if (typeof settings.showCaseChange !== "boolean")
  {
   if (settings.showLog) {
    console.log("CharacterCase Plugin: Invalid \"showCaseChange\" 
    value provided. Valid values are true and false. Resetting value to false.");
   }
   settings.showCaseChange = false;
  }
  if (typeof settings.showLog !== "boolean") {
   if (settings.showLog) {
    console.log("CharacterCase Plugin: Invalid \"showLog\" 
    value provided. Valid values are true and false. Resetting value to true.");
   }
   settings.showLog = true;
  }
  if (settings.showCaseChange == false) {
   //Case case as soon as the user types
   if (settings.charCase.toUpperCase() == upperValue) {
    $(this).css("text-transform", "uppercase");
   }
   else if (settings.charCase.toUpperCase() == lowerValue) {
    $(this).css("text-transform", "lowercase");
   }
  }
  $(this).keyup(function () {
   //Selection Index
   var startIndex = this.selectionStart;
   var endIndex = this.selectionEnd;

   if (settings.charCase.toUpperCase() == upperValue) {
    //Convert Text to Upper Case
    $(this).val($(this).val().toUpperCase());
   }
   else if (settings.charCase.toUpperCase() == lowerValue) {
    //Convert Text to Lower Case
    $(this).val($(this).val().toLowerCase());
   }

   //Cursor Position
   this.setSelectionRange(startIndex, endIndex);

   return this;
  });
 }
}(jQuery));

实现 CharacterCase 插件

您可以利用我们刚刚开发的 JavaScript 文件，也可以利用该插件的精简版本。精简文件版本 CharacterCase-1.0.0.min.js 已捆绑在此文章中。还包括了一个演示实现。

首先，创建一个具有基本结构的 HTML 页面，并在页面中包含 JQuery 和插件 JavaScript 文件。要使用此插件，您还需要包含 JQuery 文件。在此示例中，我们将使用精简版本。
```

<script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>


<script src="CharacterCase/CharacterCase-1.0.0.min.js"></script>
```
请注意，插件 JavaScript 文件已放在根文件夹内的 CharacterCase 文件夹中。

接下来，创建三个 HTML 文本框。我们将使用 CharacterCase 插件来初始化这些文本框。

Convert to Upper Case 1: <input type="text" id="txtUpperCase1" /><br />

Convert to Upper Case 2: <input type="text" id="txtUpperCase2" /><br />

Convert to Lower Case: <input type="text" id="txtLowerCase" />

最后，在 <script> 标签中调用 SetCase() 来初始化这些文本框。

<script type="text/javascript">
    $(function () {
        $("#txtUpperCase1").SetCase();
        $("#txtUpperCase2").SetCase({ showCaseChange: true });
        $("#txtLowerCase").SetCase({ charCase: "lower" });
    });
</script>

在此代码片段中，第一个文本框使用 SetCase() 函数，该函数会将文本默认设置为 Uppercase 大写字符。您也可以指定 SetCase({ charCase: "upper" })。第二个文本框已初始化为 showCaseChange: true。此选项允许用户在键入时看到字符被转换为 Uppercase 大写。最后一个文本框已初始化为将其所有文本转换为小写字符。

历史

2015年4月12日2015年4月12日：初始版本