如何使用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);
  });
});

Answer 2

这可能是个问题。

$('.ui-keyboard-input')
    .change(onChange)
    .keyup(onChange);

我觉得这就够了。

$('.ui-keyboard-input').change(onChange);