更改输入标签中的值后,自动模拟Enter键

时间:2019-05-26 08:06:50

标签: javascript html triggers javascript-events

提前感谢您的帮助 我正在使用JavaScript将数据输入HTML的隐藏输入标签中。我能够做到,但是我需要模拟键盘上的ENTER键才能将数据传递到数据库中。但是问题无法模拟Enter键。我已经尝试了一系列有关事件,侦听器和DOM的解决方案。但是他们都不为我工作。 我正在使用DynamoDB,因此无论我们输入什么类型的数据或如何输入都无所谓。我尝试过的一些代码是:

<style type="text/css">
  body.login div#login h1 a {
    background-image: url(PATH TO YOUR LOGO);
    padding-bottom: 30px;
    margin: 0;
    width: 100%;
    background-size: contain;
    pointer-events: none;
  }
</style>
<?php
} add_action( 'login_enqueue_scripts', 'custom_login_logo' );

我尝试了使用JavaScript,JQuery,事件等提供的各种解决方案。 但它们都不起作用。

function enter1() {
  var keyboardEvent = document.createEvent('KeyboardEvent');
  delete keyboardEvent.which;
  var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? 'initKeyboardEvent' : 'initKeyEvent';
  keyboardEvent[initMethod](
    'keydown', // event type : keydown, keyup, keypress
    true, // bubbles
    true, // cancelable
    window, // viewArg: should be window
    false, // ctrlKeyArg
    false, // altKeyArg
    false, // shiftKeyArg
    false, // metaKeyArg
    13, // keyCodeArg : unsigned long the virtual key code, else 0
    13 // charCodeArgs : unsigned long the Unicode character associated with the depressed key, else 0
  );
  document.getElementById('newdata').dispatchEvent(keyboardEvent);
}
<input  className="new" placeholder="add data " type="hidden"
id = "newdata" value="need to add to data base"  />

我正在寻找一种方法,当数据通过脚本更改/输入到值字段中时,它将检测到ENTER键。这样就可以传递数据

1 个答案:

答案 0 :(得分:0)

每次更改值时,您都必须自己触发更改事件。收到更改通知后,您可以调度Enter键的按键操作。

我在下面给出了触发值更改事件的代码段,而该值更改事件又触发了按键事件。

希望有帮助。

$('#hiddenValue').change(TriggerValueChanged);
$('#hiddenValue').keypress(HandleKeyPress);
		
$('#hiddenValue').val("value change 1").trigger('change');
$('#hiddenValue').val("value change 2").trigger('change');
		
function TriggerValueChanged(element) {
  var event = $.Event( "keypress", { which: 13 } );
  $('#hiddenValue').trigger(event);
}
		
function HandleKeyPress(event) {
  if(event.which == 13) {
    alert(`KeyPress Detected. Event.Which: ${event.which}`);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="hidden" id="hiddenValue" value="" />