コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

JSでコピー機能を実装

高洛峰
リリース： 2017-04-18 13:48:33
オリジナル
1460 人が閲覧しました

この記事では、非常に参考になるコピー機能を実現するJSの例を中心に紹介します。

レンダリング:

JSでコピー機能を実装

コードは次のとおりです。 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS复制功能</title>
<link href="" rel=" rel="external nofollow" stylesheet">
<style>
 *{
 margin:0;
 padding:0;
 }
 input{
 border:1px solid #ccc;
 padding: 5px;
 width: 200px;
 }
 button{
 height:32px;
 }
</style>
</head>
<body>
 <input type="text"placeholder="里面输入文字">
 <button type="button">点击复制</button>
 <script type="text/javascript" src=&#39;http://libs.baidu.com/jquery/2.0.0/jquery.js&#39;></script>
 <script>
  $(document).ready(function(){
  $(&#39;button&#39;).click(function(){
  $(&#39;input&#39;).trigger(&#39;select&#39;);
  document.execCommand(&#39;copy&#39;);
  alert(&#39;复制成功&#39;)
  })
  })
 </script>
</body>
</html>
ログイン後にコピー
続きを見る コピー関数の JS 実装に関する関連記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル：
js 复制功能
ソース：php.cn
前の記事：js ドロップダウン メニューの効果 次の記事：node.js は Redis データベースを使用してデータをキャッシュします
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
最大合計関数を取得するための MySQL 操作 最大数量を「max」に設定しようとすると、エラーが発生します: エラー コード: 1111。グループ関数の無効な使用 0.000 秒 SELECTmax(count(*))asma...
から 2024-04-04 17:49:26
0
1
376
次に、Nodejs を使用したミドルウェアが正しく動作しない 私はNodejsとexpressjsを使って作業しており、現在ミドルウェア機能に取り組んでいます。ミドルウェアの概念における「次の」仕事は何なのか知りたいです。 「次のミドルウェア...
から 2024-04-04 17:33:56
0
1
340
return(); は 1 つのルートでは機能しませんが、ほぼ同じルートでは機能します 2 つのルートがあり、1 つは購読解除用、もう 1 つは復元用です。何かが欠けている場合を除き、どちらのルートも名前/機能/URL を除いて同じです。再開サブスクリプションをキャン...
から 2024-04-04 17:34:09
0
1
311
React に入力の終了タグをレンダリングさせますか? 珍しいお願いがあります。私の Web サイトは React を使用して構築されており、公開 Web サイトの HTML を自分の React コンポーネントにコピーできるようにした...
から 2024-04-03 23:01:01
0
1
320
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート