Created
May 29, 2016 19:45
-
-
Save anonymous/cd2a522b932f2bc81b9342ffbbe288ce to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/cahuma
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * 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(); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment