how to make a button that paste text in a textbox html

Solutions on MaxInterview for how to make a button that paste text in a textbox html by the best coders in the world

showing results for - "how to make a button that paste text in a textbox html"

27 Oct 2016

1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<style>
6.tooltip {
7  position: relative;
8  display: inline-block;
9}
10
11.tooltip .tooltiptext {
12  visibility: hidden;
13  width: 140px;
14  background-color: #555;
15  color: #fff;
16  text-align: center;
17  border-radius: 6px;
18  padding: 5px;
19  position: absolute;
20  z-index: 1;
21  bottom: 150%;
22  left: 50%;
23  margin-left: -75px;
24  opacity: 0;
25  transition: opacity 0.3s;
26}
27
28.tooltip .tooltiptext::after {
29  content: "";
30  position: absolute;
31  top: 100%;
32  left: 50%;
33  margin-left: -5px;
34  border-width: 5px;
35  border-style: solid;
36  border-color: #555 transparent transparent transparent;
37}
38
39.tooltip:hover .tooltiptext {
40  visibility: visible;
41  opacity: 1;
42}
43</style>
44</head>
45<body>
46
47<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>
48
49<input type="text" value="Hello World" id="myInput">
50
51<div class="tooltip">
52<button onclick="myFunction()" onmouseout="outFunc()">
53  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
54  Copy text
55  </button>
56</div>
57
58<p>The document.execCommand() method is not supported in IE8 and earlier.</p>
59
60<script>
61function myFunction() {
62  var copyText = document.getElementById("myInput");
63  copyText.select();
64  copyText.setSelectionRange(0, 99999);
65  document.execCommand("copy");
66  
67  var tooltip = document.getElementById("myTooltip");
68  tooltip.innerHTML = "Copied: " + copyText.value;
69}
70
71function outFunc() {
72  var tooltip = document.getElementById("myTooltip");
73  tooltip.innerHTML = "Copy to clipboard";
74}
75</script>
76
77</body>
78</html>
79

Henri

13 Apr 2018

1<!DOCTYPE html>
2<html>
3 <head>
4   <script>
5     function paste() {
6            var pasteText = document.querySelector("#text");
7            pasteText.focus();
8            document.execCommand("paste");
9
10            pasteText.value = pasteText.value + pasteText.value;
11        }
12   </script>
13  </head>
14  <body>
15    <input id="text">
16    <button onclick="paste()">Paste</button>
17   </body>

Paul

09 Jul 2018

1<script>
2function copyToClipboard(element) {
3  var $temp = $("<input>");
4  $("body").append($temp);
5  $temp.val($(element).text()).select();
6  document.execCommand("copy");
7  $temp.remove();
8}
9</script>
10
11<p id="text">Hello</p>
12<button onclick="copyToClipboard('#text')"></button>

similar questions

jquery replace text in button copy button value to clipboard function javascript how to copy text from input through button click js jquery add text to textbox jquery button text angular how to copy text with button to set the text of button using jquery copy text on button click in jquery how to get button text in javascript

queries leading to this page