Copy JS函数不能在某些文件上运行,而在某些文件上运行完美



我正在创建一种字典,其中用户输入输入值,不同语言/方式的输出显示在多个不同的字段中。

1个输入可以有多个输出。输出已经根据特定输入存储,因此如果存在特定输入,则显示其指定的输出

我使用下面的代码。

<div id="input_container">
<input id="input_1" class="text-area-main input_mainn" type="text" placeholder="Input Goes Here" oninput="funcinput1()">
</div>
<div id="output">
<div class="text-detail"><div class="row element-inner single-element"><div class="col-md-11 col-10 position-initial heading-main"><div class="font-style-name"><span>Select My language</span></div></div><div class="col-md-1 col-2 button-main"><button class="ml-auto btn copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" data-clipboard-target="#output_1" >COPY</button></div><div class="col-md-12 col-12 position-initial text-area-outer"><div class="font-pre col-md-12 col-12 signature text-area-inner"><textarea id="output_1" class="text-area-main"></textarea></div></div></div></div>
<div class="text-detail"><div class="row element-inner single-element"><div class="col-md-11 col-10 position-initial heading-main"><div class="font-style-name"><span>Copy Eragon Ancient Language</span></div></div><div class="col-md-1 col-2 button-main"><button class="ml-auto btn copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" data-clipboard-target="#output_2" >COPY</button></div><div class="col-md-12 col-12 position-initial text-area-outer"><div class="font-pre col-md-12 col-12 signature text-area-inner"><textarea id="output_2" class="text-area-main"></textarea></div></div></div></div>
<div class="text-detail"><div class="row element-inner single-element"><div class="col-md-11 col-10 position-initial heading-main"><div class="font-style-name"><span>Pick Older Futhark Runes</span></div></div><div class="col-md-1 col-2 button-main"><button class="ml-auto btn copy-btn btn_cpy col-md-1 col-12 button_copy integration-checklist__copy-button btn_copy" id="btn_copy" data-clipboard-text="" data-clipboard-action="copy" data-clipboard-target="#output_3" >COPY</button></div><div class="col-md-12 col-12 position-initial text-area-outer"><div class="font-pre col-md-12 col-12 signature text-area-inner"><textarea id="output_3" class="text-area-main"></textarea></div></div></div></div>
</div>

JS:

const translator = {
"output_1": {
"speak":"speek","basic":"howtobasic","ok":"k","okay":"k","yay":"yeay","yes":"yass","yeah":"yaaa","alright":"alite","owo":"ewe i nowe yoo did zat","boat":"yes a bowt","uwu":"why yoo kepe doin zat >w>","fuck":"heyy zat badd","there":"der","l":"w","enough":"enof","Z":"zed","ah":"ahe","spam":"spem","is":"iz","giant":"gient","if":"iv","you":"yoo","eat":"eet","too":"to","to":"too","much":"mach","very":"veri","fat":"fats","the":"da","coconut":"kokonut","nut":"nuut","I":"i","back":"bak","she":"se","he":"heee","hello":"henlo","one":"on","been":"bean","lick":"leek","bean":"been","la":"le","that":"zat","language":"langage","jacob":"how u gues ma neam","z":"zzz oh yoo werre takilng","yeea boiiiiiii":"yayeet boi",
},
"output_2":{
"may the stars watch over you":"atra du evaru00ednya ono varda","may good fortune rule over you":"atra esternu00ed ono thelduin","may luck and happiness follow you, and may you be shielded from misfortune":"atra guliu00e4 un ilian tauthr ono un atra ono wau00edse sku00f6liro fra rauthr","a":"au00ed","a deadly poison":"skilna bragh","a melancholy dream of great beauty":"alalu00eba","a type of vine":"lianu00ed","air":"vindr","all":"allr","am":"eddyr","an":"au00ed","and":"un","apple":"hald","are":"eru","arm":"vaupna","armor":"hernskja","arrow":"oro","as":"nen","ask":"bidja","awaken":"vakna","awry":"vrangr","back (adj)":"aptr","back (n)":"hrygr","back (n)":"bak","bad":"illr",
},
"output_3":{
"speak":"speek","basic":"howtobasic","ok":"k","okay":"k","yay":"yeay","yes":"yass","yeah":"yaaa","alright":"alite","owo":"ewe i nowe yoo did zat","boat":"yes a bowt","uwu":"why yoo kepe doin zat >w>","fuck":"heyy zat badd","there":"der","l":"w","enough":"enof","Z":"zed","ah":"ahe","spam":"spem","is":"iz","giant":"gient","if":"iv","you":"yoo","eat":"eet","too":"to","to":"too","much":"mach","very":"veri","fat":"fats","the":"da","coconut":"kokonut","nut":"nuut","I":"i","back":"bak","she":"se","he":"heee","hello":"henlo","one":"on","been":"bean","lick":"leek","bean":"been","la":"le","that":"zat","language":"langage","jacob":"how u gues ma neam","z":"zzz oh yoo werre takilng","yeea boiiiiiii":"yayeet boi",
}

};
document.querySelector("#input_1").addEventListener("input", (e) => {
for (const output of Object.keys(translator)) {
document.querySelector(`#${output}`).value = translate(e.target, output);
}
});
function translate(input, outputSelector) {
const text = input.value;
const currentTranslator = translator[outputSelector];
const translated = replaceOnceUsingDictionary(currentTranslator, text, function(key, dictionary) {
return dictionary[key];
});
return translated;
}
/*
* @description Replaces phrases in a string, based on keys in a given dictionary.
*               Each key is used only once, and the replacements are case-insensitive
* @param       Object dictionary  {key: phrase, ...}
* @param       String content
* @param       Function replacehandler
* @returns     Modified string
*/
function replaceOnceUsingDictionary(dictionary, content, replacehandler) {
if (typeof replacehandler != "function") {
// Default replacehandler function.
replacehandler = function(key, dictionary) {
return dictionary[key];
}
}
var patterns = [], // b is used to mark boundaries "foo" doesn't match food
patternHash = {},
oldkey, key, index = 0,
output = [];
for (key in dictionary) {
// Case-insensitivity:
// key = (oldkey = key).toLowerCase();
key = (oldkey = key);
dictionary[key] = dictionary[oldkey];
// Sanitize the key, and push it in the list
patterns.push('\b(?:' + key.replace(/([[^$.|?*+(){}])/g, '\$1') + ')\b');
// Add entry to hash variable, for an optimized backtracking at the next loop
patternHash[key] = index++;
}
var pattern = new RegExp(patterns.join('|'), 'gi'),
lastIndex = 0;
// We should actually test using !== null, but for foolproofness,
//  we also reject empty strings
while (key = pattern.exec(content)) {
// Case-insensitivity
// key = key[0].toLowerCase();
key = key[0];
// Add to output buffer
output.push(content.substring(lastIndex, pattern.lastIndex - key.length));
// The next line is the actual replacement method
output.push(replacehandler(key, dictionary));
// Update lastIndex variable
lastIndex = pattern.lastIndex;
// Don't match again by removing the matched word, create new pattern
patterns[patternHash[key]] = '^';
pattern = new RegExp(patterns.join('|'), 'gi');
// IMPORTANT: Update lastIndex property. Otherwise, enjoy an infinite loop
pattern.lastIndex = lastIndex;
}
output.push(content.substring(lastIndex, content.length));
return output.join('');
};
//translator code ends here

var clipboard = new Clipboard('.copy-btn');
clipboard.on('success',function(e){setTooltip(e.trigger,'Copied!')});
function setTooltip(btn,message)
{
$("button.ml-auto.copy-btn.btn_cpy").html('COPY');
$(btn).html('Copied!')
}

如果你看看我的代码,每个输出textarea字段都有一个与之关联的复制按钮,它应该复制字段的值,但它在这种情况下不起作用。代码在某些页面停止工作,而在另一些页面工作。(工作代码:https://thefontworld.com/genz-talk-translator)

两个页面的JS代码和HTML代码相同,只是在"output"中输入的输入/输出值不同。

我使用这个代码复制函数:

var clipboard = new Clipboard('.copy-btn');
clipboard.on('success',function(e){setTooltip(e.trigger,'Copied!')});
function setTooltip(btn,message)
{
$("button.ml-auto.copy-btn.btn_cpy").html('COPY');
$(btn).html('Copied!')
}

对于相同的复制函数,我面临的另一件事是,当它工作时,它只能在新页面加载时工作,但是,一旦我重新加载页面,复制函数就不起作用了。

我仍然是JS的新手,所以学习一切,所以任何帮助找到这个复制按钮不工作的原因将是超级有用的。

注:输入和输出值是在page中预先定义的,可以有unicode、特殊字符和字母数字值

谢谢!

希望得到专业人士的解决方案!

这个复制函数应该可以工作:

const button = document.getElementById("button"),
container = document.getElementById("container");
container.addEventListener("click", event => {
const id = event.target.id;

const textarea = document.getElementById("textarea" + id[id.length - 1]);

//just for display
textarea.select();

//copy text
navigator.clipboard.writeText(textarea.value).then(() => {
//text was copied successfully
});
});
<div id="container">
<textarea id="textarea1">some text</textarea>
<button id="button1">copy</button>
<textarea id="textarea2">some text</textarea>
<button id="button2">copy</button>
<textarea id="textarea3">some text</textarea>
<button id="button3">copy</button>
<textarea id="textarea4">some text</textarea>
<button id="button4">copy</button>
</div>

最新更新