jQuery如何从焦点输入字段值中删除

Question

我创建了虚拟数字键盘，但由于遇到问题，我现在卡住了。

现在看来，我只有几个输入字段，当我添加一些数据并且犯了一些错误时，我想删除它，为此我有func，但是这个func是从所有字段中删除值。

我该如何解决？

 

(function ($) {
    "use strict";
    $.fn.virtualKeyboard = function (options) {
        var defaults = {
            number: true,
            allowRealKeyboard: true,
            maxLength: 16
        };

        var $virtualKeyboard = $(this);
        var settings = $.extend(true, defaults, options);
        var $creditInput = $(settings.inputs.credit.class);
        var $currentInput = "";

        var Validation = {
            interger: function (number) {
                if (isNaN((number))) {
                    throw new Error("Error: Not a interger");
                }
                return true;
            },
            creditRange: function (number) {
                if (number >= 0 && number < 10) {
                    return true;
                }
                throw new Error("Error: Not between 1 and 9");
            },
            maxLength: function (number) {
                return number >= settings.maxLength ? true : false;
            }
        };

        $virtualKeyboard.on("click", settings.buttons.number.class, function (
            event
        ) {
            event.preventDefault();
            if ($currentInput) {
                var keyBoardVal = $(this).val(), currentVal = $currentInput.val();

                if (!Validation.maxLength(currentVal.length)) {
                    if (
                        Validation.interger(keyBoardVal) &&
                        Validation.creditRange(keyBoardVal)
                    ) {
                        if (currentVal && Validation.interger(currentVal)) {
                            $currentInput.val(String(currentVal) + String(keyBoardVal));
                        } else {
                            $currentInput.val(keyBoardVal);
                        }
                    }
                }

                if (Validation.maxLength($currentInput.val().length)) {
                    $currentInput.next().focus();
                }
            }
        });

        $creditInput.focus(function () {
            $currentInput = $(this);
            $creditInput.removeClass("active");
            $currentInput.addClass("active");
        });

        if (!settings.allowRealKeyboard) {
            $creditInput.keypress(function (e) {
                e.preventDefault();
                return;
            });
        }
    };
})(jQuery);

$(function () {
    $(".virtual-keyboard").virtualKeyboard({
        number: true,
        allowRealKeyboard: false,
        buttons: {
            number: {
                class: ".ui-virtual-keyboard",
                type: "number"
            }
        },
        inputs: {
            credit: {
                class: ".ui-keyboard-input",
                type: "number"
            }
        }
    });
});

$('.del').click(function () {
        $('.ui-keyboard-input').val($('.ui-keyboard-input').val().substring(0, $('.ui-keyboard-input').val().length - 1));
});

$(".ui-keyboard-input").on("click", function () {
    $('.modal, .cover').removeClass("hidden");
    $('.modal').addClass("zoom");
    $('.input').val("");
});


$(".cover, .close").on("click", function () {
    $('.modal').attr('class', 'modal');
    $('.modal, .cover').addClass("hidden");
});

.virtual-keyboard .number {
    margin: 15px;
    width: 150px;
    height: 150px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 50%;
    background-color: #878787;
    color: #fff;
    border-color: #fff;
}

.cover {
    z-index: 1;
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #333;
    top: 0;
    left: 0;
    opacity: .9;
}

.modal {
    z-index: 2;
    height: 600px;
    width: 800px;
    background-color: #262626;
    border-radius: 5px;
    text-align: center;
    border-top: solid 3px #262626;
    position: absolute;
    opacity: 0.9;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

    .modal .content p {
        font-size: 2em;
        color: #fff;
        height: 50px;
        width: 100%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div class='modal hidden'>
    <div class='content'>
        <div class="virtual-keyboard">
            <button class="ui-virtual-keyboard number" value="1">1</button>
            <button class="ui-virtual-keyboard number" value="2">2</button>
            <button class="ui-virtual-keyboard number" value="3">3</button>
            <button class="ui-virtual-keyboard number" value="4">4</button>
            <button class="ui-virtual-keyboard number" value="5">5</button>
            <button class="ui-virtual-keyboard number" value="6">6</button>
            <button class="ui-virtual-keyboard number" value="7">7</button>
            <button class="ui-virtual-keyboard number" value="8">8</button>
            <button class="ui-virtual-keyboard number" value="9">9</button>
            <button class="ui-virtual-keyboard number" value="0">0</button>
            <button class="ui-virtual-keyboard number del">del</button>
        </div>
    </div>
</div>
<input class="numbQuan ui-keyboard-input number" type="text" required />
<input class="numbNest ui-keyboard-input number" type="text" required />
<input class="numbCycles ui-keyboard-input number" type="text" required />
<input class="numbLayers ui-keyboard-input number" type="text" required />

如您所见，数据正在添加到输入字段中，但是当您按 DEL 时，它将删除所有字段中的值。

但是我需要，当单击 DEL 时，它仅从每个添加数据的输入中删除值

Answer 1

您可以这样做：

$('.del').click(function() {
  $('.ui-keyboard-input.active').val(function() {
    return $(this).val().substring(0, $(this).val().length - 1)
  });
});

现在它将仅从活动/集中的输入中删除内容。

演示

(function($) {
  "use strict";
  $.fn.virtualKeyboard = function(options) {
    var defaults = {
      number: true,
      allowRealKeyboard: true,
      maxLength: 16
    };

    var $virtualKeyboard = $(this);
    var settings = $.extend(true, defaults, options);
    var $creditInput = $(settings.inputs.credit.class);
    var $currentInput = "";

    var Validation = {
      interger: function(number) {
        if (isNaN((number))) {
          throw new Error("Error: Not a interger");
        }
        return true;
      },
      creditRange: function(number) {
        if (number >= 0 && number < 10) {
          return true;
        }
        throw new Error("Error: Not between 1 and 9");
      },
      maxLength: function(number) {
        return number >= settings.maxLength ? true : false;
      }
    };

    $virtualKeyboard.on("click", settings.buttons.number.class, function(
      event
    ) {
      event.preventDefault();
      if ($currentInput) {
        var keyBoardVal = $(this).val(),
          currentVal = $currentInput.val();

        if (!Validation.maxLength(currentVal.length)) {
          if (
            Validation.interger(keyBoardVal) &&
            Validation.creditRange(keyBoardVal)
          ) {
            if (currentVal && Validation.interger(currentVal)) {
              $currentInput.val(String(currentVal) + String(keyBoardVal));
            } else {
              $currentInput.val(keyBoardVal);
            }
          }
        }

        if (Validation.maxLength($currentInput.val().length)) {
          $currentInput.next().focus();
        }
      }
    });

    $creditInput.focus(function() {
      $currentInput = $(this);
      $creditInput.removeClass("active");
      $currentInput.addClass("active");
    });

    if (!settings.allowRealKeyboard) {
      $creditInput.keypress(function(e) {
        e.preventDefault();
        return;
      });
    }
  };
})(jQuery);

$(function() {
  $(".virtual-keyboard").virtualKeyboard({
    number: true,
    allowRealKeyboard: false,
    buttons: {
      number: {
        class: ".ui-virtual-keyboard",
        type: "number"
      }
    },
    inputs: {
      credit: {
        class: ".ui-keyboard-input",
        type: "number"
      }
    }
  });
});

$('.del').click(function() {
  $('.ui-keyboard-input.active').val(function() {
    return $(this).val().substring(0, $(this).val().length - 1)
  });
});

$(".ui-keyboard-input").on("click", function() {
  $('.modal, .cover').removeClass("hidden");
  $('.modal').addClass("zoom");
  $('.input').val("");
});


$(".cover, .close").on("click", function() {
  $('.modal').attr('class', 'modal');
  $('.modal, .cover').addClass("hidden");
});

.virtual-keyboard .number {
  margin: 15px;
  width: 150px;
  height: 150px;
  font-size: 20px;
  font-weight: bold;
  border-radius: 50%;
  background-color: #878787;
  color: #fff;
  border-color: #fff;
}

.cover {
  z-index: 1;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #333;
  top: 0;
  left: 0;
  opacity: .9;
}

.modal {
  z-index: 2;
  height: 600px;
  width: 800px;
  background-color: #262626;
  border-radius: 5px;
  text-align: center;
  border-top: solid 3px #262626;
  position: absolute;
  opacity: 0.9;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.modal .content p {
  font-size: 2em;
  color: #fff;
  height: 50px;
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='modal hidden'>
  <div class='content'>
    <div class="virtual-keyboard">
      <button class="ui-virtual-keyboard number" value="1">1</button>
      <button class="ui-virtual-keyboard number" value="2">2</button>
      <button class="ui-virtual-keyboard number" value="3">3</button>
      <button class="ui-virtual-keyboard number" value="4">4</button>
      <button class="ui-virtual-keyboard number" value="5">5</button>
      <button class="ui-virtual-keyboard number" value="6">6</button>
      <button class="ui-virtual-keyboard number" value="7">7</button>
      <button class="ui-virtual-keyboard number" value="8">8</button>
      <button class="ui-virtual-keyboard number" value="9">9</button>
      <button class="ui-virtual-keyboard number" value="0">0</button>
      <button class="ui-virtual-keyboard number del">del</button>
    </div>
  </div>
</div>
<input class="numbQuan ui-keyboard-input number" type="text" required />
<input class="numbNest ui-keyboard-input number" type="text" required />
<input class="numbCyclesui-keyboard-input number" type="text" required />
<input class="numbLayersui-keyboard-input number" type="text" required />