javascript - 如何使用 jQuery 将一个字段的内容复制到另一个字段

Question

我使用虚拟小键盘工作。

我构建了一个在模态窗口中打开的键盘；当我在后台打开输入窗口时，它是不可见的。

我的想法是在模态窗口中创建输入。

我希望能够将输入字段中的实时值复制到模态输入字段中。

我的代码:

(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"
      }
    }
  });
});

$(function () {
    var $inputFields= $('.ui-keyboard-input');
    var $keyboardInput = $('#keyboardInput');
    function onChange() {
        console.log($keyboardInput.val())
        $keyboardInput.val($inputFields.val());
    };
    $('.ui-keyboard-input')
        .change(onChange)
        .keyup(onChange);
});
$('.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'>
<input type="text" id="keyboardInput" value="1">
    <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 />

$(function () {
var $inputFields= $('.ui-keyboard-input');
var $keyboardInput = $('#keyboardInput');
function onChange() {
    console.log($keyboardInput.val())
    $keyboardInput.val($inputFields.val());
};
$('.ui-keyboard-input')
    .change(onChange)
    .keyup(onChange);
});

我有一个从字段中获取值的函数，但它不起作用。我不确定为什么。

在图片中您可以看到示例，每个字段的值都应该转到键盘中的字段。

Answer 1

Jquery 未检测到 val() 上的更改，因此该函数是可行的方法，但它被调用超出范围，使用 mouseup 会更好。像这样:

function onChange() {
    var $inputFields= $('.ui-keyboard-input');
    var $keyboardInput = $('#keyboardInput');
    console.log($keyboardInput.val())
    $keyboardInput.val($inputFields.val());
};
$('.ui-virtual-keyboard').on('mouseup', onChange);

这会将值设置为延迟一个字符，为了使其正常工作我建议阅读 virtualKeyboard 文档以将其事件从 click 更改为至 mousedown .

不确定中间字段的用途，但如果要连接以上所有四个字段，您将需要创建一个函数来执行此操作，它不会通过获取类 val() 自动执行此操作，因为这将选择所有四个输入。

你的第三个和第四个字段也有类错误，你应该把它从之前的类中分离出来，否则它对它们不起作用。

我还将这个已删除的方法更改为类似这样的方法，因为它更简单:

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