qGuide: クリップボードから一括ペースト
qGuide: Batch Paste from Clipboard
複数のフォーム要素に一括入力するボタンです。クリップボード上のテキストが行ごとに分割され、既定のフィールドに貼り付けられます。この例では、4つのフィールドへの一括貼付(単一行文字列・選択肢・日付・複数行文字列)が実装されています。
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>
自由改変可能な HTML/JavaScript コードです (MIT License)。いかなる保証もありません。
Capture

