How to copy contents of one field to another using jQuery

user_11254117 0
Viewed 204

I work with a Virtual numpad.

I built a keyboard which is opened in modal window; when I open the input window in the background, it is not visible.

My idea was to create the input in modal window.

I want to be able to copy the live value from an input field into the modal input field.

My code:

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

I have a function to get value from the field, but it is not working. I'm not sure know why.

enter image description here

In the picture you can see the example, each field's value should go to the field in the keyboard.

html jquery javascript
2 Answers

Jquery doesn't detect changes on val(), so that function is the way to go, but it's being called out of scope and the event would be better with mouseup like this:

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

This will set the value one character delayed, for it to work correctly I would suggest reading the virtualKeyboard doc to change it's event from click to mousedown.

Not sure of the purpose of that middle field, but if it is to concat all the four above, you will need to make a function that does that, it will not do it automatically by getting a class val(), because that will select all the four inputs.

Your third and fourth fields also have the class wrong, you should split it from the class before or it will not work on them.

I would also change this deleted method to something like this, because it's simpler:

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

Here might be a issue.

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

I think this is enough.

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