halfzebra/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
#input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#focus:focus {
  background-color: grey;
}
</style>
</head>
<body>
<span tabindex="1" id="focus">Click me to focus, and then Ctrl + V  a string</span>
<input type="text" id="input">
<input type="text" id="real-input">
<script id="jsbin-javascript">
/*
 * Example  of DOM manipulation for extracting clipboard content.
 *
 * Browsers do not allow to access the clipboard directly, current
 * approach relies on using a hidden input field to intercept the value.
 *
 */

'use strict';

var focus = document.getElementById('focus');
var input = document.getElementById('input');
var realInput = document.getElementById('real-input');

var flag = false;

focus.addEventListener('keydown', handleKeypress);
input.addEventListener('focus', handleFocus);
input.addEventListener('change', handleChange);

function handleKeypress(event) {
  var ctrlKey = event.ctrlKey;
  var keyCode = event.keyCode;

  if (ctrlKey === true && keyCode === 86) {
    flag = true;
    input.focus();
  }
}

function handleFocus(event) {
  var _this = this;

  if (flag === true) {
    flag = false;

    setTimeout(function () {
      console.clear();
      console.group('VALUE: ', _this.value, new Date().getSeconds());
      focus.focus();
    }, 0);
  }
}

function handleChange() {
  realInput.value = this.value;
  this.value = '';
  realInput.focus();
}
</script>


<script id="jsbin-source-css" type="text/css">#input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#focus:focus {
  background-color: grey;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">/*
 * Example  of DOM manipulation for extracting clipboard content.
 *
 * Browsers do not allow to access the clipboard directly, current
 * approach relies on using a hidden input field to intercept the value.
 *
 */

const focus = document.getElementById('focus')
const input = document.getElementById('input')
const realInput = document.getElementById('real-input')

let flag = false

focus.addEventListener('keydown', handleKeypress)
input.addEventListener('focus', handleFocus)
input.addEventListener('change', handleChange)

function handleKeypress(event) {

  const { ctrlKey, keyCode } = event

  if (ctrlKey === true && keyCode === 86) {
    flag = true
    input.focus()
  }
}


function handleFocus(event) {
  if (flag === true) {
    flag = false

    setTimeout(
      () => {
        console.clear()
        console.group('VALUE: ', this.value, new Date().getSeconds())
        focus.focus()
      },
      0
    )
  }
}


function handleChange() {
  realInput.value = this.value
  this.value = ''
  realInput.focus()
}</script></body>
</html>

## jsbin.cahuma.css
#input {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#focus:focus {
  background-color: grey;
}

## jsbin.cahuma.js
/*
 * Example  of DOM manipulation for extracting clipboard content.
 *
 * Browsers do not allow to access the clipboard directly, current
 * approach relies on using a hidden input field to intercept the value.
 *
 */

'use strict';

var focus = document.getElementById('focus');
var input = document.getElementById('input');
var realInput = document.getElementById('real-input');

var flag = false;

focus.addEventListener('keydown', handleKeypress);
input.addEventListener('focus', handleFocus);
input.addEventListener('change', handleChange);

function handleKeypress(event) {
  var ctrlKey = event.ctrlKey;
  var keyCode = event.keyCode;

  if (ctrlKey === true && keyCode === 86) {
    flag = true;
    input.focus();
  }
}

function handleFocus(event) {
  var _this = this;

  if (flag === true) {
    flag = false;

    setTimeout(function () {
      console.clear();
      console.group('VALUE: ', _this.value, new Date().getSeconds());
      focus.focus();
    }, 0);
  }
}

function handleChange() {
  realInput.value = this.value;
  this.value = '';
  realInput.focus();
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	#input {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	}

	#focus:focus {
	background-color: grey;
	}
	</style>
	</head>
	<body>
	<span tabindex="1" id="focus">Click me to focus, and then Ctrl + V a string</span>
	<input type="text" id="input">
	<input type="text" id="real-input">
	<script id="jsbin-javascript">
	/*
	* Example of DOM manipulation for extracting clipboard content.
	*
	* Browsers do not allow to access the clipboard directly, current
	* approach relies on using a hidden input field to intercept the value.
	*
	*/

	'use strict';

	var focus = document.getElementById('focus');
	var input = document.getElementById('input');
	var realInput = document.getElementById('real-input');

	var flag = false;

	focus.addEventListener('keydown', handleKeypress);
	input.addEventListener('focus', handleFocus);
	input.addEventListener('change', handleChange);

	function handleKeypress(event) {
	var ctrlKey = event.ctrlKey;
	var keyCode = event.keyCode;

	if (ctrlKey === true && keyCode === 86) {
	flag = true;
	input.focus();
	}
	}

	function handleFocus(event) {
	var _this = this;

	if (flag === true) {
	flag = false;

	setTimeout(function () {
	console.clear();
	console.group('VALUE: ', _this.value, new Date().getSeconds());
	focus.focus();
	}, 0);
	}
	}

	function handleChange() {
	realInput.value = this.value;
	this.value = '';
	realInput.focus();
	}
	</script>


	<script id="jsbin-source-css" type="text/css">#input {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	}

	#focus:focus {
	background-color: grey;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">/*
	* Example of DOM manipulation for extracting clipboard content.
	*
	* Browsers do not allow to access the clipboard directly, current
	* approach relies on using a hidden input field to intercept the value.
	*
	*/

	const focus = document.getElementById('focus')
	const input = document.getElementById('input')
	const realInput = document.getElementById('real-input')

	let flag = false

	focus.addEventListener('keydown', handleKeypress)
	input.addEventListener('focus', handleFocus)
	input.addEventListener('change', handleChange)

	function handleKeypress(event) {

	const { ctrlKey, keyCode } = event

	if (ctrlKey === true && keyCode === 86) {
	flag = true
	input.focus()
	}
	}


	function handleFocus(event) {
	if (flag === true) {
	flag = false

	setTimeout(
	() => {
	console.clear()
	console.group('VALUE: ', this.value, new Date().getSeconds())
	focus.focus()
	},
	0
	)
	}
	}


	function handleChange() {
	realInput.value = this.value
	this.value = ''
	realInput.focus()
	}</script></body>
	</html>