qGuide: Batch Paste from Clipboard
Button for batch input to multiple form elements. The text on the clipboard is split into lines and pasted into each field. In this example, batch pasting to 4 fields (singleline string, select, date, multiline string) is implemented.
Input / Output
- ← (clip board)
- → qString (STRING_TEXTFIELD)
q_Email
- → qSelect (SELECT_SINGLE)
q_Country
- → qDate (DATE_YMD)
q_Birth
- → qString (STRING_TEXTAREA)
q_Remarks
Code Example
HTML/JavaScript (click to close)
<span style="color:#FFC69B; font-size:x-large; font-style:italic;"
>Paste from Clipboard</span><a title="
arrLines[0] → q_Email,
arrLines[1] → q_Country,
arrLines[2] → q_Birth,
arrLines[3] to End → q_Remarks
"> <span style="font-size: x-large;" class="material-icons">help_outline</span></a><br>
<button type="button" onclick="user_batchPaste()">
Batch Paste <span class="material-icons">content_paste_go</span></button>
<button type="button" onclick="user_showClipboard()">
(show only) <span class="material-icons">content_paste_search</span></button>
<div id="user_Sandbox" style="padding:2px; margin:5px; border: 3px solid #FFC69B; "
>(Clipboard Viewer...)</div>
<script>
function user_batchPaste () {
let elSandbox = document.querySelector ( '#user_Sandbox' ); // ★★★ EDIT (Selector ID) ★★★
/// Remove all nodes and elements
while ( elSandbox.firstChild ){
elSandbox.removeChild ( elSandbox.firstChild );
}
const dateCurrent = new Date();
console.log( '[' + dateCurrent + '] sandbox removed' );
navigator.clipboard.readText().then( strClipText => {
let strLines = convertLineEndingsToLF( strClipText );
let arrLines = strLines.split( '\n' ); // Split with LF
/// Set to qData fields
qbpms.form.set( 'q_Email', arrLines[0] ); // ★★★ EDIT (Field Name and Line ID) ★★★
qbpms.form.set( 'q_Country', arrLines[1] ); // ★★★ EDIT (Field Name and Line ID) ★★★
qbpms.form.set( 'q_Birth', arrLines[2] ); // ★★★ EDIT (Field Name and Line ID) ★★★
qbpms.form.set( 'q_Remarks', arrLines.slice(3).join('\n') ); // ★★★ EDIT (Field Name and Line ID) ★★★
/// Add text nodes
for( let i = 0; i < arrLines.length; i++ ){
elSandbox.appendChild( document.createTextNode( arrLines[i] ) );
elSandbox.appendChild( document.createElement( 'br' ) );
}
return;
}).catch( err => {
console.error( 'Failed to read clipboard contents: ', err );
});
}
/**
* Reads the text from the user's clipboard and displays it in a specified HTML element.
* The element with the given selector ID will have its content replaced with the clipboard text.
* If reading the clipboard fails, an error will be logged to the console.
* Requires the "clipboard-read" permission.
*
* @example
* // Assuming there is an element with the ID 'user_Sandbox' on the page
* user_showClipboard();
*/
function user_showClipboard () {
let elSandbox = document.querySelector ( '#user_Sandbox' ); // ★★★ EDIT (Selector ID) ★★★
/// Remove all nodes and elements
while ( elSandbox.firstChild ){
elSandbox.removeChild ( elSandbox.firstChild );
}
const dateCurrent = new Date();
console.log( '[' + dateCurrent + '] sandbox removed' );
navigator.clipboard.readText().then( strClipText => {
let arrLines = strClipText.split('\n');
/// Add text nodes
for( let i = 0; i < arrLines.length; i++ ){
elSandbox.appendChild( document.createTextNode( '[' + i + ']: ' + arrLines[i] ) );
// elSandbox.appendChild( document.createTextNode( arrLines[i] ) );
elSandbox.appendChild( document.createElement( 'br' ) );
}
return;
}).catch( err => {
console.error( 'Failed to read clipboard contents: ', err);
});
}
/**
* Converts line endings (CRLF, CR) to LF in the given text.
*
* @function
* @param {string} text - The text with line endings to be converted.
* @returns {string} The converted text with LF line endings.
*/
function convertLineEndingsToLF(text) {
return text.replace( /\r\n|\r/g, '\n' );
}
</script>
Freely modifiable HTML/JavaScript code, MIT License. No warranty of any kind.
Capture

