2017-05-22 2 views
0

Toller Tag, ich möchte um etwas beraten bitte bitten, ich bin wirklich neu zu HTML und CSS sowie Java und alle zusammenzusetzen ist ein bisschen schwer für mich so, ich bin Ich hoffe auf Rat.JS Reset-Funktion für 2 Zwischenablagen

Ich habe vor kurzem ein Formular erstellt, obwohl ich nicht herausfinden konnte, wie alle Funktionen zurückgesetzt werden, wie das Zurücksetzen des Containers in seine ursprüngliche Form, nachdem ich es kopiert habe.

bitte die meine Codes und lassen Sie mich wissen, was ich tun kann. Ihre Hilfe wird gerne in Anspruch genommen.

<html> 
 
<head> 
 
<style type="text/css"> 
 
/* Some Generic styles */ 
 
body { 
 
    text-align: center; 
 
    font-family: "Open Sans", Helvetica, Arial, sans-serif; 
 
    color: #023378; 
 
    line-height: 0.5; 
 
    background-color:#1E334F; 
 
} 
 
h1 { 
 
    margin: 0.5em auto 0.5em; 
 
    color: #71A4EB; 
 
} 
 
textarea, 
 
button { 
 
    font-size: 1em; 
 
    font-family: "Open Sans", Helvetica, Arial, sans-serif; 
 
} 
 
textarea { 
 
    display: block; 
 
    margin: 0.5em auto 0.5em; 
 
    background: #CAD6E6; 
 
    resize: vertical; 
 
} 
 
[id="cleared"] { 
 
    margin-top: 4em; 
 
} 
 
textarea:focus { 
 
    border-color: #8fa423; 
 
} 
 
button { 
 
    position: relative; 
 
    padding: 8px 20px; 
 
    border: 0; 
 
    font-size: 0.835em; 
 
    text-transform: uppercase; 
 
    letter-spacing: 0.125em; 
 
    font-weight: bold; 
 
    color: #3F71B6; 
 
    background: #7DA9E6; 
 
    transition: background .275s; 
 
} 
 
button:hover, 
 
button:focus { 
 
    background: #5275A5; 
 
} 
 

 
p { 
 
    margin-top: 3.25em; 
 
    font-size: .825em; 
 
    color: #777; 
 
    font-weight: bold; 
 
    letter-spacing: .01em 
 
} 
 
</style> 
 

 
<h1>SH!N</h1> 
 
<body> 
 

 
<textarea id="to-copy" cols="80" rows="25" spellcheck="false"> 
 
SESA 
 
Caller's Name: 
 
Call back number: 
 
Email Address: 
 
Related case #s (case history): 
 
Location, remote/hotel/office: 
 

 
Application Name: 
 
Number of Users Affected: Number of Users Affected: (Single User/Less than 5 users/5 or more users) 
 

 
What is the issue/problem: 
 
When did the issue/problem begin: 
 
Login id: 
 
Error message (if any): 
 
When was the last time it worked properly: 
 
Have there been any changes to your PC since the last time it worked properly: 
 
Have you changed your password recently: 
 

 
Troubleshooting steps (detailed): 
 

 
Additional Detail (links, screen shots etc.. : 
 
</textarea><br> 
 

 
<button id="copy" type="button">Copy<span class="copiedtext"aria-hidden="true"></span></button> 
 
<textarea id="text" cols="80" rows="8" > 
 
Resolution: 
 

 

 
A - problem: 
 
B - cause: 
 
C - actions: 
 
D - resolution: 
 
</textarea><br> 
 
<button onclick="copy()">Copy</button><br> 
 

 
<SCRIPT TYPE="text/javascript"> 
 
var toCopy = document.getElementById('to-copy'), 
 
    btnCopy = document.getElementById('copy'); 
 

 
btnCopy.addEventListener('click', function(){ 
 
    toCopy.select(); 
 
    
 
    if (document.execCommand('copy')) { 
 
     btnCopy.classList.add('copied'); 
 
    
 
     var temp = setInterval(function(){ 
 
     btnCopy.classList.remove('copied'); 
 
     clearInterval(temp); 
 
     }, 600); 
 
    
 
    } else { 
 
    console.info('document.execCommand went wrong…') 
 
    } 
 
    
 
    return false; 
 
}); 
 

 
function copy() { 
 
\t var text = document.getElementById('text'); 
 
\t var range = document.createRange(); 
 

 
\t range.selectNode(text); 
 
\t window.getSelection().addRange(range); 
 
\t document.execCommand('copy'); 
 
} 
 

 
</SCRIPT> 
 

 

 
</body> 
 
</html>

Antwort

0

Um eine Form zu machen, sollten Sie nicht TextArea- (oder es nur als Teil eines Formulars verwendet wird, zum Beispiel um einen Kommentar in einem Blog zu machen)

Wenn Sie ein Formular erstellen möchten, müssen Sie Formular-Tag

<form id="myForm">Caller's name <input type="text" name="callerName"> ... </form> 

https://www.w3schools.com/html/html_forms.asp

verwenden

Und dann, wenn Sie es, innerhalb Javascript zurücksetzen möchten:

document.getElementById("myForm").reset();

Ihre Form hat id "myForm", können Sie dieses Element und die Verwendung Reset select() Funktion auf es auf Form die Arbeit.

PS: Sie sollten Ihren Stil in eine CSS-Datei und Ihr Skript in eine JS-Datei einfügen.

EDIT:

Wenn Sie es kopieren möchten:

var myForm = document.getElementById('myForm'); 
var targetForm = document.getElementById('targetForm'); 
targetForm.innerHTML = myForm.innerHTML; 

Offcourse Sie ein Formular-Tag mit id-Set targetForm haben müssen.

+0

danken Ihnen für die Beantwortung, ja Sie richtig sind in der Tat, obwohl im nicht sicher, wie ich in der Lage sein würde, alles mit nur 1 Klick kopieren, Ich muss in der Lage, die Frage und die Antwort zu kopieren .. wie Namen : SHIN E-MAIL: [email protected] so ähnlich .. im nach wie vor, obwohl das Lernen: D –

+0

Sie können mit dem Code tun, dass ich Sie in meinem EDIT gab es alles in

kopieren werden. Oder Sie können zum Beispiel Ihre Frage in Spannweite mit einer bestimmten Klasse und erhalten Sie ein Array davon mit document.getElementsByClass ("Frage") und die gleiche Sache Putting-Klasse "Antwort" für und andere Element Ihres Formulars. – Nolyurn