2017-03-24 8 views
0

このデモを見て、#mapからボタンのテキストを読み取るためにコピー機能を呼び出そうとすると、#coordinateXの値をコピーできない理由を教えてください#coordinateXしかし、コードは入力テキストに対してうまく機能しますか? ボタンの値を読み取るにはどうすればいいですか?ボタンの値からクリップボードにコピーする際の問題

(function() { 
 

 
\t 'use strict'; 
 
    
 
    // click events 
 
    document.body.addEventListener('click', copy, true); 
 

 
\t // event handler 
 
\t function copy(e) { 
 

 
    // find target element 
 

 
    var t = e.target; 
 

 
     var c = t.dataset.copytarget; 
 
     var inp = (c ? document.querySelector(c) : null); 
 
     
 
    // is element selectable? 
 
    if (inp && inp.select) { 
 
     
 
     // select text 
 
     inp.select(); 
 

 
     try { 
 
     // copy text 
 
     document.execCommand('copy'); 
 
     inp.blur(); 
 
     
 
     // copied animation 
 
     t.classList.add('copied'); 
 
     setTimeout(function() { t.classList.remove('copied'); }, 1500); 
 
     } 
 
     catch (err) { 
 
     alert('please press Ctrl/Cmd+C to copy'); 
 
     } 
 
     
 
    } 
 
    
 
\t } 
 

 
})();
http://www.sitepoint.com/
<div class="container"> 
 
<div class="btn-group"> 
 
    <button class="btn" id="coordinateX">49.124545</button> 
 
    <button class="btn" id="map" data-copytarget="#coordinateX">Copy Coordinate</button> 
 
</div> 
 

 
<br /> 
 
    <label for="website">Website:</label> 
 
<input type="text" id="txtCoordinateX" value="49.124545" /> 
 
<button data-copytarget="#txtCoordinateX">Copy Coordinate From Input</button> 
 

 

 
</div>

+1

コピーはユーザーのみ編集可能なテキストのために動作します。これは私の知る限り、入力タグ(テキストボックス付き)とcontentEditable dom要素です。クイックフィックスのために、そのボタンのcontenteditable = true属性を叩く。 –

+0

返信ありがとうございますが、まだ動作していません – Behseini

答えて

1
<div class="container"> 
<div class="btn-group"> 
    <button class="btn" id="coordinateX">49.124545</button> 
    <button class="btn" id="map" data-copytarget="#coordinateX">Copy Coordinate</button> 
</div> 

<br /> 
    <label for="website">Website:</label> 
<input type="text" id="txtCoordinateX" value="49.124545" /> 
<button data-copytarget="#txtCoordinateX" id="copyBlock">Copy Coordinate From Input</button> 

<span id="copyAnswer"></span> 
</div> 

var textarea = document.getElementById("txtCoordinateX"); 
var answer = document.getElementById("copyAnswer"); 
var copy = document.getElementById("copyBlock"); 
copy.addEventListener('click', function(e) { 

    // Select some text (you could also create a range) 
    textarea.select(); 

    // Use try & catch for unsupported browser 
    try { 

     // The important part (copy selected text) 
     var successful = document.execCommand('copy'); 

     if(successful) answer.innerHTML = 'Copied!'; 
     else answer.innerHTML = 'Unable to copy!'; 
    } catch (err) { 
     answer.innerHTML = 'Unsupported Browser!'; 
    } 
}); 

フィドラーhttps://jsfiddle.net/ktgzujLe/

関連する問題