JavaScript — флажки и мгновенный вывод в отдельное текстовое поле и буфер обмена
В этом примере (a-star.dk) пользователь может создавать текст, устанавливая различные флажки — варианты мгновенно записываются в текстовое поле (по крайней мере, для СТРАНЫ). Но у меня есть проблемы при интеграции строки 2-3-4 (CAPITAL, COLOR, NUMBER) в одно и то же текстовое поле вывода, как это можно сделать? Таким образом, в конечном итоге вся информация из отмеченных полей записывается в исходящие, но каждый раздел (1-2-3-4) начинается с новой строки.
Во-вторых, я хочу вставить / скопировать / вырезать конечный результат в текстовом поле в буфер обмена (равно Ctrl + C), чтобы его можно было использовать в другом программном обеспечении. Я использую clipboard.min.js, но он не работает, что не так?
В-третьих, поэтому не очень важно, возможно ли удалить первый автоматически сгенерированный «,» из каждого раздела? (как?), чтобы конечный результат был: [СТРАНА: Америка, Бирма, Чили], а не [СТРАНА: Америка, Бирма, Чили,]
В-четвертых, как я могу интегрировать вводимые пользователем цифры (строка 4 — НОМЕР — Другое число) или текст? в массиве и, следовательно, в конечном выводе
<!doctype html>
<html><head><meta charset="UTF-8"><title>TEST</title>
<script src="clipboard.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("input[name='A']").change(function(){
var checkedCountries = $("input[name='A']:checked");
var countries = [];
for(var i = 0; i<checkedCountries.length; i++) {
countries.push(checkedCountries[i].value + ",");
}
$("#countryList").val(countries.join(" "));
});
$("#copyBtn").click(function() {
var copyText = document.getElementById("countryList");
copyText.select();
document.execCommand("Copy");
alert("Copied the text: " + copyText.value);
});
});
</script>
<script>function changeText(){
var userInputA = Array.prototype.slice.call(document.querySelectorAll(".A:checked")).map(function(el) {return el.value;}).join(', ')
var userInputB = Array.prototype.slice.call(document.querySelectorAll(".B:checked")).map(function(el) {return el.value;}).join(', ')
var userInputC = Array.prototype.slice.call(document.querySelectorAll(".C:checked")).map(function(el) {return el.value;}).join(', ')
var userInputD = Array.prototype.slice.call(document.querySelectorAll(".D:checked")).map(function(el) {return el.value;}).join(', ')document.getElementById('output1').innerHTML = userInputA;
document.getElementById('output2').innerHTML = userInputB;
document.getElementById('output3').innerHTML = userInputC;
document.getElementById('output4').innerHTML = userInputD;
return false;
}
</script>
<script>
new Clipboard('.btn');
</script>
</head><body><form method="get" onsubmit="return changeText()">
<table style="background-color:white;">
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="A" class="A" value="COUNTRY:">COUNTRY:</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="A" class="A" value="America">America
<input type="checkbox" name="A" class="A" value="Burma">Burma
<input type="checkbox" name="A" class="A" value="Chile">Chile
<input type="checkbox" name="A" class="A" value="Denmark">Denmark
<input type="checkbox" name="A" class="A" value="England">England
</td></tr>
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="B" class="B" value="CAPITAL:">CAPITAL</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="B" class="B" value="Amsterdam">Amsterdam
<input type="checkbox" name="B" class="B" value="Berlin">Berlin
<input type="checkbox" name="B" class="B" value="Copenhagen">Copenhagen
<input type="checkbox" name="B" class="B" value="Damaskus">Damaskus
</td></tr>
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="C" class="C" value="COLOR:">COLOR</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="C" class="C" value="Amsterdam">Blue
<input type="checkbox" name="C" class="C" value="Copenhagen">Red
<input type="checkbox" name="C" class="C" value="Green">Green
</td></tr>
<tr><td style="background-color:#EFEFFB;"><input type="checkbox" name="D" class="D" value="NUMBER:">NUMBER</td><td style="background-color:#EFEFFB;">
<input type="checkbox" name="D" class="D" value="1">1
<input type="checkbox" name="D" class="D" value="2">2
<input type="checkbox" name="D" class="D" value="3">3
<input type="checkbox" name="D" class="D" value="4">4
<input type="checkbox" name="D" class="D" value="5">5
<input type="number" name="D" min="6" max="100">Other number
</td></tr>
</table>
<br /><br />
<textarea id="countryList" rows="8" cols="61"></textarea></br>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#countryList">Cut to clipboard</button>
<br /><br />
<input type="submit" value="Output" />
<br /><br />
<b id='output1'></b><br />
<b id='output2'></b><br />
<b id='output3'></b><br />
<b id='output4'></b><br /></body>
</html>
Решение
Задача ещё не решена.
Другие решения
Других решений пока нет …