use a hidden <textarea> for the clipboard pasting and transfer the text into a nice...
authorDamyan Ivanov <dmn@debian.org>
Mon, 19 Jun 2017 14:51:50 +0000 (14:51 +0000)
committerDamyan Ivanov <dmn@debian.org>
Mon, 19 Jun 2017 14:51:50 +0000 (14:51 +0000)
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

icedeb.css
icedeb.html
icedeb.js

index 0aed167..03f22b7 100644 (file)
@@ -1,4 +1,5 @@
 body { padding: 1ex; }
+#clip-pot { position: absolute; left: -1000px; }
 #clipboard {
   margin: 2px;
   min-height: 1.5em;
index e6a62f6..e0ebc9c 100644 (file)
@@ -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>
index b730d26..9c9a770 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) => {