2017-05-22 5 views
0

偉大な日、私はいくつかのアドバイスをお願いしたいと思います。本当にhtmlとcssだけでなくjavaも含めて、それらのすべてを一緒に入れるのは少し難しいです。いくつかの助言を期待しています。2クリップボード用のJSリセット機能

最近私はフォームを作成しましたが、私はそれをコピーした後に元のフォームにリセットするなど、すべての機能をリセットする方法を理解できませんでした。

私のコードを覚えて、私にできることを教えてください。あなたの助けが大いに評価されます。

<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>

答えて

0

フォームを作るために、あなたは(ブログにコメントを作るために、たとえば、形だけの一部としてそれを使用するか)テキストエリアを使用しないでください

フォームを作りたい場合は、あなたが

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

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

formタグを使用する必要があります。その後、

そして、あなたはjavascriptの内部で、それをリセットする場合:

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

フォームにID「あるmyForm」を持っている、あなたは、フォーム上で動作し、その上にこの要素と使用リセット()関数を選択します。

PS:あなたのスタイルをCSSファイルに、スクリプトをJSファイルに入れてください。

EDIT:

あなたがそれをコピーする場合:

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

OffcourseあなたはtargetFormへのidが設定されたフォームのタグを持っている必要があります。

+0

私は質問と答えをコピーできるようにする必要があり 、私は1回のクリックですべてのものをコピーすることができるだろうか上のイムわからないけれどもはい、あなたが本当に正しいか、応答をありがとう。..のような 名前を:SHIN Eメール:[email protected] 私はまだ学習しています:D –

+0

編集したコードでこれを行うことができます。

の中にすべてコピーされます。 たとえば、質問を特定のクラスに跨って配置し、document.getElementsByClass( "question") で配列を取得し、とフォームの他の要素に対して同じクラスの「回答」を出すことができます。 – Nolyurn