Функция копирования Javascript - это должно работать, но не

ProgramBox

Функция копирования Javascript — это должно работать, но не

Post author:admin
Запись опубликована:15 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Хорошо, я делал это миллион раз. Это расстраивает, я ни за что на свете не могу понять, почему это не копирует мой контент из (notefield) Мне нужна свежая пара глаз, чтобы называть меня пустышкой….

Это сработает с 1 попытки, а затем не сработает еще с 20 попыток. У меня такое чувство, что это связано с чем-то, что я делаю, что я упускаю из виду.

моя функция CopyReset () просто терпит неудачу в 90% случаев, и я запускал эту функцию 10000 раз, прежде чем никаких проблем…

HTML (с функцией копирования)

 <html>
<head>
<title> Tech Helper </title>
<link rel="stylesheet" type="text/css" href="csslayout.css">
<script src="scriptsnewTicket.js"></script>
</head>
<header> 
<div id='header' class='header'>
<div id='logo' class='logo' align='right'> 
<img src="redactedlink" class='banner'></img>
</div> 
<div class='headtable'>
<table id='headtable'>
<tr>
<th>Technician Name: <input type="text" id='techName' value=""> </th>
</tr>
</table>
</div>
</div>
</header>
<body onload="LoadScript()">

<div id='container' class='container'> 
<table id='containertable' class='tabcontainer'>
<tr>
<td class='tableft'><div id='navmenu'></div></td>
<td class='tabright'><table id='content'></table></th>
</tr>
</table>
</div>
</body>
<div id='footer' class='footer'> 
<table id='foottable' class='foottable'>
<tr>
<th> Footer </th>
</tr>
</table>
</div>
<textarea id="notefield" class="hiddentext"></textarea>

<script> 

function CopyReset() { 
var target = document.getElementById('notefield');
target.select();
document.execCommand('copy');

//alert("Cancellation Notes Copied");
document.getElementById("content").innerHTML = "";
//document.getElementById("notefield").value = "";
}

</script>
</html>

Javascript newTicket.js

 function LoadScript() { 
document.getElementById('navmenu').innerHTML = "<input type='button' onclick='NewTicket()' 
class='navButton' value='New Ticket' id='newTicket'>";
}

var reached = "false";
function NewTicket() { 
var incident = prompt("Enter Incident Number");
var c =  document.getElementById("content");

if ( incident == null || incident.length != 15 ) { 
alert("Invalid Incident Number Entered, Please enter a valid Incident number!");
}
else if ( incident != null amp;amp; incident.length == 15 ) { 
c.innerHTML = "<tr> <td colspan='100%'> Incident: <input type='text' id='incField' value='' 
class='readonlyfield' readonly></td></td>";
c.innerHTML  = "<tr id='contactInfo1'> <th colspan='2'>Please Select Contact Method:</th></tr><tr 
id='contactInfo2'><td colspan='2 class='td1'><div id='contactInfo' align='center'> Phone: <input 
type='radio' onclick='phoneContact()' name='contactType' id='phone'> Skype: <input type='radio' 
onclick='skypeContact()' name='contactType' id='skype'></div></td></tr>";
document.getElementById('incField').value = incident;
document.getElementById('navmenu').innerHTML = "";
document.getElementById('navmenu').innerHTML = "<input type='button' class='navButton' value='Cancel 
Ticket' onclick='CancelTicket()' id='endTicket'>";
 
}


}


function phoneContact() {
var numberUsed = prompt('Please Enter the number you called the user at');
if ( numberUsed == null ) {
alert('Must enter a Phone Number');
}
else if (numberUsed != null) { 
document.getElementById('notefield').value  = "Reached user at: "   numberUsed   "n"; 
reached = "true";
document.getElementById('contactInfo1').innerHTML = "";
document.getElementById('contactInfo2').innerHTML = "";
}

} 

function skypeContact() {
var skypeLog = prompt('Please Contact Log to begin');
if ( skypeLog == null ) {
alert('Must Provide Contact Log!');
}
else if (skypeLog != null) { 
document.getElementById('notefield').value  = "Reached User via Skype: "   skypeLog   "n"; 
reached = "true";
document.getElementById('contactInfo1').innerHTML = "";
document.getElementById('contactInfo2').innerHTML = "";

}

} 


function CancelTicket() { 
    if (reached == "false" ) { 
        alert('Canno Cancel Ticket Without Contact');
    }
    else if (reached == "true" ) {
        var reason = prompt("Reason for cancelling ticket: ");
                if (reason == null) {
            alert('Cancel Reason cannot be blank!');
            }
            else if (reason != null) {
                document.getElementById('navmenu').innerHTML = "<input type='button' 
class='navButton' 
onclick='NewTicket()' value='New Ticket' id='newTicket'>";
                document.getElementById('notefield').value  = "Ticket Cancelled, Reason: "   reason;
                CopyReset();
        }
    }
}

И для CSS layout от SNG.css

 .header {
border-radius: 10px 10px 0px 0px;
background-color:blue;
width: auto;
margin-left: 20px;
margin-right: 20px;
margin-top:20px;
height: 80px;
position:relative;
}
.headtable { 
position:absolute;
margin: 20px 10px 0px 10px;
vertical-align: text-bottom;
}
.logo { 
width:350px;
padding-top:10px;
padding-right:10px;
float:right;
}
.td1 { 
text-align: right;
}
.banner { 
}
.hiddentext {
opacity:100%;
}
.incbox {
float:left;
}
.readonlyfield { 
background-color: #eee;
}

.navButton { 
width: 100%;
height:25px;
border-radius: 5px 5px 5px 5px;
border-color:blue;
}
.navButton:Hover { 
border-radius: 1px 1px 1px 1px;
border-color:black;
background:lightblue;
opacity: 96%;
}


.container {
background-color:green;
width: auto;
height: 600px;
position:relative;
margin-left: 20px;
margin-right: 20px;
}

.tabcontainer {
width: 100%;
height: 600px;
}
.tableft {
vertical-align: text-top;
background-color: yellow;
width:15%;;

}
.tabright {
vertical-align: text-top;
background-color: pink;
}

.footer {
position:relative;
border-radius: 0px 0px 10px 10px;
bottom: 0px;
background-color:red;
width: auto;
height: 80px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

Ответ №1:

Хорошо, здесь я немного исправил ошибку в вашем JS-коде, особенно некоторые разрывы строк в одинарных кавычках, где помещены некоторые html-теги… Также добавлен блок для запуска JS только после загрузки DOM, не знаю, так ли это, но в песочнице здесь он выдает ошибку без этого. Итак, проверьте демонстрацию ниже, в моем случае текст вставляется в textarea и копируется в буфер обмена при отмене заявки

 function LoadScript() { 
document.getElementById('navmenu').innerHTML = "<input type='button' onclick='NewTicket()' class='navButton' value='New Ticket' id='newTicket'>";
}

var reached = "false";
function NewTicket() { 
var incident = prompt("Enter Incident Number");
var c =  document.getElementById("content");

if ( incident == null || incident.length != 15 ) { 
alert("Invalid Incident Number Entered, Please enter a valid Incident number!");
}
else if ( incident != null amp;amp; incident.length == 15 ) { 
c.innerHTML = "<tr> <td colspan='100%'> Incident: <input type='text' id='incField' value='' class='readonlyfield' readonly></td></td>";
c.innerHTML  = "<tr id='contactInfo1'> <th colspan='2'>Please Select Contact Method:</th></tr><tr id='contactInfo2'><td colspan='2 class='td1'><div id='contactInfo' align='center'> Phone: <input type='radio' onclick='phoneContact()' name='contactType' id='phone'> Skype: <input type='radio' onclick='skypeContact()' name='contactType' id='skype'></div></td></tr>";
document.getElementById('incField').value = incident;
document.getElementById('navmenu').innerHTML = "";
document.getElementById('navmenu').innerHTML = "<input type='button' class='navButton' value='Cancel Ticket' onclick='CancelTicket()' id='endTicket'>";
 
}


}


function phoneContact() {
var numberUsed = prompt('Please Enter the number you called the user at');
if ( numberUsed == null ) {
alert('Must enter a Phone Number');
}
else if (numberUsed != null) { 
document.getElementById('notefield').value  = "Reached user at: "   numberUsed   "n"; 
reached = "true";
document.getElementById('contactInfo1').innerHTML = "";
document.getElementById('contactInfo2').innerHTML = "";
}

} 

function skypeContact() {
var skypeLog = prompt('Please Contact Log to begin');
if ( skypeLog == null ) {
alert('Must Provide Contact Log!');
}
else if (skypeLog != null) { 
document.getElementById('notefield').value  = "Reached User via Skype: "   skypeLog   "n"; 
reached = "true";
document.getElementById('contactInfo1').innerHTML = "";
document.getElementById('contactInfo2').innerHTML = "";

}

} 


function CancelTicket() { 
    if (reached == "false" ) { 
        alert('Canno Cancel Ticket Without Contact');
    }
    else if (reached == "true" ) {
        var reason = prompt("Reason for cancelling ticket: ");
                if (reason == null) {
            alert('Cancel Reason cannot be blank!');
            }
            else if (reason != null) {
                document.getElementById('navmenu').innerHTML = "<input type='button' class='navButton' onclick='NewTicket()' value='New Ticket' id='newTicket'>";
                document.getElementById('notefield').value  = "Ticket Cancelled, Reason: "   reason;
                CopyReset();
        }
    }
}

 .header {
border-radius: 10px 10px 0px 0px;
background-color:blue;
width: auto;
margin-left: 20px;
margin-right: 20px;
margin-top:20px;
height: 80px;
position:relative;
}
.headtable { 
position:absolute;
margin: 20px 10px 0px 10px;
vertical-align: text-bottom;
}
.logo { 
width:350px;
padding-top:10px;
padding-right:10px;
float:right;
}
.td1 { 
text-align: right;
}
.banner { 
}
.hiddentext {
opacity:100%;
}
.incbox {
float:left;
}
.readonlyfield { 
background-color: #eee;
}

.navButton { 
width: 100%;
height:25px;
border-radius: 5px 5px 5px 5px;
border-color:blue;
}
.navButton:Hover { 
border-radius: 1px 1px 1px 1px;
border-color:black;
background:lightblue;
opacity: 96%;
}


.container {
background-color:green;
width: auto;
height: 600px;
position:relative;
margin-left: 20px;
margin-right: 20px;
}

.tabcontainer {
width: 100%;
height: 600px;
}
.tableft {
vertical-align: text-top;
background-color: yellow;
width:15%;;

}
.tabright {
vertical-align: text-top;
background-color: pink;
}

.footer {
position:relative;
border-radius: 0px 0px 10px 10px;
bottom: 0px;
background-color:red;
width: auto;
height: 80px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}

 <html>
<head>
<title> Tech Helper </title>
<link rel="stylesheet" type="text/css" href="csslayout.css">
<script src="scriptsnewTicket.js"></script>
</head>
<header> 
<div id='header' class='header'>
<div id='logo' class='logo' align='right'> 
<img src="redactedlink" class='banner'></img>
</div> 
<div class='headtable'>
<table id='headtable'>
<tr>
<th>Technician Name: <input type="text" id='techName' value=""> </th>
</tr>
</table>
</div>
</div>
</header>
<body onload="">

<div id='container' class='container'> 
<table id='containertable' class='tabcontainer'>
<tr>
<td class='tableft'><div id='navmenu'></div></td>
<td class='tabright'><table id='content'></table></th>
</tr>
</table>
</div>
</body>
<div id='footer' class='footer'> 
<table id='foottable' class='foottable'>
<tr>
<th> Footer </th>
</tr>
</table>
</div>
<textarea id="notefield" class="hiddentext"></textarea>

<script> 

function CopyReset() { 
var target = document.getElementById('notefield');
target.select();
document.execCommand('copy');

//alert("Cancellation Notes Copied");
document.getElementById("content").innerHTML = "";
//document.getElementById("notefield").value = "";
}

// Wait for DOM loads
document.addEventListener("DOMContentLoaded", function() {
  LoadScript()
});

</script>
</html>

1. итак, @tarkh к сожалению, я сталкиваюсь с той же проблемой, иногда она будет копировать, но не каждый раз. Я думаю, что это связано с кнопкой, добавляемой через javascript, я попробую это со статической кнопкой и посмотрю, что произойдет.

2. ну, не удается воспроизвести в Safari 13 на macOS

3. проблема в Chrome на Win 10. Это копировалось некорректно, также мне удалось немного отладить его и удалить некоторый код из моих инструкций if в моей функции отмены, по-видимому, функция вызывала проблему с тем, что она не копировалась. Он скопировал 1 из, возможно, 20 раз. теперь у меня это работает каждый раз, когда я нажимаю.

Ответ №2:

Разобрался с этим, не удаляя кнопки

newTicet.js

 function LoadScript() {
    document.getElementById('navmenu').innerHTML = "<input type='button' onclick='NewTicket()' class = 'navButton'value = 'New Ticket'id = 'newTicket' > ";
}
reached = 0;
function NewTicket() {
    var incident = prompt("Enter Incident Number");
    var c = document.getElementById("content");
if (incident == null || incident.length != 15) {
    alert("Invalid Incident Number Entered, Please enter a valid Incident number!");
} 
else if (incident != null amp;amp; incident.length == 15) {
    c.innerHTML = "<tr> <td colspan='100%'> Incident: <input type='text' id='incField' value='' class = 'readonlyfield' readonly> </td></td> ";
    c.innerHTML  = "<tr id='contactInfo1'> <th colspan='2'>Please Select Contact Method:</th></tr><tr id='contactInfo2'> <td colspan = '2 class='td1'><div id='contactInfo' align='center'> Phone: <input type='radio' onclick='phoneContact()' name='contactType'id = 'phone' > Skype: <input type='radio' onclick = 'skypeContact()' name = 'contactType' id = 'skype' > </div></td > </tr>";
    document.getElementById('incField').value = incident;
    document.getElementById('navmenu').innerHTML = "";
    document.getElementById('navmenu').innerHTML = "<input type='button' class='navButton' value='Cancel Ticket' onclick='CancelTicket()' id='endTicket'>";
    }
}
function phoneContact() {
    var numberUsed = prompt('Please Enter the number you called the user at');
    if (numberUsed == null) {
         alert('Must enter a Phone Number');
} 
else if (numberUsed != null) {
        document.getElementById('notefield').value  = "Reached user at: "   numberUsed   "n";
        reached = 1;
        document.getElementById('contactInfo1').innerHTML = "";
        document.getElementById('contactInfo2').innerHTML = "";
    } 
}

function skypeContact() {
    var skypeLog = prompt('Please Contact Log to begin');
    if (skypeLog == null) {
        alert('Must Provide Contact Log!');
} 
else if (skypeLog != null) {
        document.getElementById('notefield').value  = "Reached User via Skype: "   skypeLog   "n";
        reached = 1;
        document.getElementById('contactInfo1').innerHTML = "";
        document.getElementById('contactInfo2').innerHTML = "";
    }
 }

function CancelTicket() {
    if (Boolean(reached) == false) {
    alert("Cannot Cancel Ticket Without Contact");
} 
 else if (Boolean(reached) == true) {
       var reason = prompt("Reason for cancelling ticket: ");
  } 
if (reason == null) {
    alert("Cancel Reason cannot be blank!");
  }
     else if (reason != null) {
            document.getElementById('navmenu').innerHTML = "<input type='button' class='navButton' onclick='NewTicket()' value='New Ticket' id='newTicket'>";
        document.getElementById('notefield').value  = "Ticket Cancelled, Reason: "   reason;
    CopyReset();
    }
}
function CopyReset() {
var target = document.getElementById('notefield');
target.select();
document.execCommand('copy');
alert("Cancellation Notes Copied");
document.getElementById("content").innerHTML = "";
document.getElementById("notefield").value = "";
}