use a hidden <textarea> for the clipboard pasting and transfer the text into a nice...

caveats: it has to be <textarea> and with contenteditable="true"
<div> works too, but that would receive also new-lines and formatting.
<textarea> nicely strips all formatting

<input> doesn't work since it cannot have text content

<input> is used for the UI since it looks like the natural choice
to enter the query

select all the text in the <input> to allow for quick replacement
by the user

diff --git a/icedeb.css b/icedeb.css
index 0aed167bd018d8db79551164d9abf1166fd3bca1..03f22b7407e54d31bc0a0f2bae7520fbc3d54900 100644 (file)
--- a/icedeb.css
+++ b/icedeb.css
@@ -1,4 +1,5 @@
 body { padding: 1ex; }
+#clip-pot { position: absolute; left: -1000px; }
 #clipboard {
   margin: 2px;
   min-height: 1.5em;

diff --git a/icedeb.html b/icedeb.html
index e6a62f675f53ffa5546a981afa26e640c52f5e35..e0ebc9cd0bd156308bcb78ca37b7d6881e35394d 100644 (file)
--- a/icedeb.html
+++ b/icedeb.html
@@ -5,7 +5,8 @@
     <link rel="stylesheet" href="icedeb.css"/>
   </head>
   <script src="icedeb.js"></script>
-  <textarea id="clipboard" rows="1"></textarea>
+  <textarea id="clip-pot" contenteditable="true"></textarea>
+  <input type="text" id="clipboard"/>
   <div id="button-list-container">
       <div><span class="icedeb-button" id="bts">Bug tracker</span> (<a href="https://bugs.debian.org/">site</a>)</div>
       <div><span class="icedeb-button" id="pts">Package tracker</span> (<a href="https://tracker.debian.org/">site</a>)</div>

diff --git a/icedeb.js b/icedeb.js
index b730d26ffa16003777c5e6ac3ecda49057bd8055..9c9a77053aa597e6b418f69d5efd6c2306a92eb6 100644 (file)
--- a/icedeb.js
+++ b/icedeb.js
@@ -117,11 +117,11 @@ function link_clicked(e) {
   }
 
   let clip_input = document.getElementById("clipboard");
-  if(clip_input.textContent == '')
+  if(clip_input.value == '')
     get_clipboard_contents();
-  let clip = trim(clip_input.textContent);
+  let clip = trim(clip_input.value);
 
-  if(clip_input.textContent == '') return;
+  if(clip_input.value == '') return;
 
   let url;
 
@@ -168,13 +168,19 @@ function link_clicked(e) {
 function get_clipboard_contents() {
   document.getElementById('error').classList.add('hidden');
 
+  let clip_pot = document.getElementById('clip-pot');
   let clip_input = document.getElementById("clipboard");
-  clip_input.focus();
-  if (!document.execCommand("paste")) {
+  clip_pot.focus();
+  if (!document.execCommand("Paste")) {
     let err = document.getElementById('error');
     err.textContent = 'Error retrieving clipboard contents';
     err.classList.remove('hidden');
   }
+  else {
+    clip_input.value = clip_pot.textContent.trim();
+    clip_input.focus();
+    clip_input.setSelectionRange(0, clip_input.value.length)
+  }
 }
 
 window.addEventListener('DOMContentLoaded', (e) => {