ホームページ ウェブフロントエンド jsチュートリアル state_javascript スキルを変更するダブルクリック編集を実装する JS メソッド

state_javascript スキルを変更するダブルクリック編集を実装する JS メソッド

May 16, 2016 pm 03:45 PM
js 改訂 ダブルクリック 編集

この記事の例では、状態を変更するダブルクリック編集を実装する JS のメソッドを説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは現在人気のフォームエフェクトです。Web ページ上のテキストをクリックすると、テキストが編集状態に変わるか、新しいテキストが入力されます。これは、フォームを制御する JavaScript の例です。編集可能なユーザー名と署名ファイルをダブルクリックします。

操作効果は以下の通りです:

オンライン デモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-double-click-edit-style-codes/

具体的なコードは次のとおりです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现双击编辑可修改状态</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<script type="text/javascript">
function ShowElement(element)
{
var oldhtml = element.innerHTML;
var newobj = document.createElement('input');
//创建新的input元素
newobj.type = 'text';
//为新增元素添加类型
newobj.onblur = function(){
element.innerHTML = this.value &#63; this.value : oldhtml;
//当触发时判断新增元素值是否为空,为空则不修改,并返回原有值 
}
element.innerHTML = '';
element.appendChild(newobj);
newobj.focus();
}
</script>
</head>
<body>
<dl>
 <dt>你的用户名:</dt>
 <dd ondblclick="ShowElement(this)">三人行团队</dd>
 <dt>你的个性档</dt>
 <dd ondblclick="ShowElement(this)">我闪故我在</dd>
</dl>
</body>
</html>
ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

DingTalk のグループ内の個人名を変更する方法_DingTalk のグループ内の個人名を変更する方法 DingTalk のグループ内の個人名を変更する方法_DingTalk のグループ内の個人名を変更する方法 Mar 29, 2024 pm 08:41 PM

1. まずDingTalkを開きます。 2. グループ チャットを開き、右上隅にある 3 つの点をクリックします。 3. このグループで私のニックネームを見つけます。 4. クリックして入力し、変更して保存します。

Douyin Blue V の名前は変更できますか?法人Douyin Blue Vアカウントの名前を変更する手順は何ですか? Douyin Blue V の名前は変更できますか?法人Douyin Blue Vアカウントの名前を変更する手順は何ですか? Mar 22, 2024 pm 12:51 PM

Douyin Blue V 認証は、Douyin プラットフォーム上の企業またはブランドの公式認証であり、ブランド イメージと信頼性の向上に役立ちます。企業の発展戦略の調整やブランドイメージの更新に伴い、企業はDouyin Blue V認証の名称を変更したい場合があります。では、Douyin Blue V は名前を変更できるのでしょうか?答えは「はい」です。この記事では、エンタープライズ Douyin Blue V アカウントの名前を変更する手順を詳しく紹介します。 1.Douyin Blue V の名前は変更できますか? Douyin Blue V アカウントの名前は変更できます。 Douyin の公式規定によると、企業の Blue V 認定アカウントは、一定の条件を満たした後にアカウント名の変更を申請できます。一般的に、企業は社名変更の合法性と必要性​​を証明するために、営業許可証、組織コード証明書などの関連資料を提供する必要があります。 2. 企業のDouyin Blue Vアカウントの名前を変更する手順は何ですか?

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト 推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

Win10のスリープ時間変更のヒントが明らかに Win10のスリープ時間変更のヒントが明らかに Mar 08, 2024 pm 06:39 PM

Win10 のスリープ時間変更のヒントが明らかに 現在広く使用されているオペレーティング システムの 1 つである Windows 10 には、ユーザーがコンピューターを使用していないときに電力を節約し、画面を保護するのに役立つスリープ機能があります。ただし、デフォルトのスリープ時間がユーザーのニーズを満たさない場合があるため、Win10 のスリープ時間を変更する方法を知ることが特に重要です。この記事では、Win10 のスリープ時間を変更するためのヒントを紹介します。これにより、システムのスリープ設定を簡単にカスタマイズできるようになります。 1.「設定」からWin10のスリープ時間を変更します。まず、最も簡単な修正です。

Tencent Docs でドキュメントを編集するにはどうすればよいですか? -Tencent ドキュメント編集ドキュメント チュートリアル ガイド Tencent Docs でドキュメントを編集するにはどうすればよいですか? -Tencent ドキュメント編集ドキュメント チュートリアル ガイド Mar 19, 2024 am 08:19 AM

Tencent Docs でドキュメントを編集する方法を知っている人はいますか? 知らなくても問題ありません。今日は、編集者が Tencent Docs でドキュメントを編集する方法を図で詳しく説明します。お役に立てれば幸いです。 Tencent ドキュメントでのドキュメント編集の詳細な図による説明 1. まず、Tencent ドキュメントに直接入力し (お持ちでない場合は、今すぐダウンロードしてください!)、直接ログインします (QQ と TIM の 2 つのログイン方法がサポートされています) 2. ログイン後、右上隅の [追加] をクリックして、オンライン ドキュメント、オンライン フォーム、新しいフォルダーなどを直接作成します! 3. 次に、必要に応じて情報を入力します。

Word文書が編集できない場合の対処法 Word文書が編集できない場合の対処法 Mar 19, 2024 pm 09:37 PM

文書を編集した後、次回の編集や変更に便利なように文書を保存します。編集した文書をクリックして直接変更できる場合もありますが、何らかの理由で、いくら操作しても応答がない場合もあります。 Word 文書をクリックしてもコマンドは実行されません。Word 文書を編集できない場合はどうすればよいですか?心配しないでください。エディターがこの問題を解決するのに役立ちます。操作プロセスを見てみましょう。 Word 文書を開いてテキストを編集すると、次の図に示すように、ページの右側に「編集を制限する」というプロンプトが表示されます。 2. 編集をキャンセルする必要があり、設定したパスワードを知る必要があるため、下図に示すように、ポップアップ プロンプトの下にある [保護の停止] をクリックします。 3. 次の図に示すように、[ドキュメントの保護解除] ダイアログ ボックスにパスワードを入力し、[OK] をクリックします。

Xianyuで公開されている製品のアドレスの場所を変更する方法 Xianyuで公開されている製品のアドレスの場所を変更する方法 Mar 28, 2024 pm 03:36 PM

Xianyuプラットフォームで製品を公開する際、ユーザーは実際の状況に応じて製品の地理的位置情報をカスタマイズできるため、潜在的な購入者は製品の特定の位置をより正確に把握できます。製品が無事に店頭に並べられれば、販売者の所在地が変わっても心配する必要はありません。 Xianyu プラットフォームは、柔軟で便利な変更機能を提供しています。公開された製品のアドレスを変更したい場合、どのように変更すればよいでしょうか? このチュートリアル ガイドでは、詳細なステップバイステップ ガイドが提供されます。助けてください、皆さん! Xianyu でリリース製品アドレスを変更するにはどうすればよいですか? 1. Xianyu を開き、公開したものをクリックして製品を選択し、[編集] をクリックします。 2. 位置決めアイコンをクリックし、設定したいアドレスを選択します。

Meizu 21proでダブルクリックロック画面を設定するにはどうすればよいですか? Meizu 21proでダブルクリックロック画面を設定するにはどうすればよいですか? Mar 18, 2024 pm 04:10 PM

Meizu 21Pro のオペレーティング システム Flyme には豊富なパーソナライズ オプションも用意されており、ユーザーは自分の好みや習慣に合わせてカスタマイズできます。その中でも、ダブルクリック画面ロック機能は、ユーザーが素早く画面をロックして携帯電話のセキュリティを保護できる非常に実用的な設定です。次に、携帯電話をより便利に使用するために、Meizu 21Pro でダブルクリックロック画面機能を設定する方法を紹介します。 Meizu 21pro でダブルクリック ロック画面を設定する方法 1. [設定]-[アクセシビリティ]-[ジェスチャー ウェイク]に入り、[ジェスチャー ウェイク]の右側にあるスイッチをクリックして、ブラック スクリーン ジェスチャー機能のオンまたはオフを制御します。 2. システムのデスクトップ-[設定]-[指紋とセキュリティ]で、ロック画面のパスワードを設定するか、指紋を入力します。指紋によるロック解除機能がない場合は、[設定]-[セキュリティ]に移動します。

See all articles