JavaScript を使用して Internet Explorer のアドレス バーを読み取り専用モードに設定する方法

PHPz
リリース: 2023-04-24 09:47:30
オリジナル
918 人が閲覧しました

JavaScript は、Web サイトの機能とユーザー エクスペリエンスを向上させるために広く使用されている Web 開発言語です。実際の仕事では、ブラウザのアドレスバーを読み取り専用に設定しなければならない場面によく遭遇します。この記事では、JavaScript を使用して Internet Explorer のアドレス バーを読み取り専用モードに設定する方法について説明します。

Internet Explorer は Microsoft によって開発されたブラウザ ソフトウェアです。Windows オペレーティング システムに付属するブラウザの 1 つです。市場シェアは Chrome や Firefox などの他のブラウザほどではありませんが、依然として一定数のユーザーがいるグループ。 Internet Explorer でアドレス バーを読み取り専用に設定するには、DOM (ドキュメント オブジェクト モデル) を使用してブラウザーのビューとコンテンツを管理する必要があります。

Internet Explorer のアドレス バーに読み取り専用モードを設定する具体的な手順を実装してみましょう:

  1. アドレス バー オブジェクトを取得します

ウィンドウを使用します。 location オブジェクトは、URL やハッシュ値を含むブラウザのアドレス情報を取得できます。後続の操作のために、このオブジェクトを通じてアドレス バーの DOM オブジェクトを取得する必要があります。

var addressBar = document.getElementById("address");
ログイン後にコピー
  1. 入力禁止

アドレス バーの readOnly 属性を設定すると、ユーザーによるアドレス バーへの入力を禁止できます。構文は次のとおりです。

addressBar.readOnly = true;
ログイン後にコピー
  1. カーソルを非表示にする

アドレス バーへの入力を禁止していますが、場合によってはアドレス バーにカーソルが表示されたままになり、トラブルが発生することがあります。ユーザーへ。したがって、読み取り専用属性を設定した後、カーソルを非表示にする必要があります。 Internet Explorer では、アドレス バーの contentEditable プロパティを設定することでカーソルを非表示にすることができます。

addressBar.contentEditable = false;
ログイン後にコピー
  1. 貼り付けを無効にする

ユーザーがクリップボードからアドレス バーにコンテンツを貼り付けることが許可されている場合、アドレス バーのコンテンツが検証されるという保証はありません。したがって、ユーザーがアドレス バーにテキストを貼り付けることができないようにする必要もあります。

addressBar.onpaste = function() { return false; };
ログイン後にコピー
  1. 最終的な効果

以下に示すように、上記の手順を統合します。

var addressBar = document.getElementById("address");
addressBar.readOnly = true;
addressBar.contentEditable = false;
addressBar.onpaste = function() { return false; };
ログイン後にコピー

最終的な効果は、ユーザーが入力、貼り付け、および入力できなくなることです。任意のテキストを選択します。これは、Web サイトのセキュリティとユーザーのプライバシーをより適切に保護するのに役立つ、シンプルですが実用的なテクノロジーです。

以上がJavaScript を使用して Internet Explorer のアドレス バーを読み取り専用モードに設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート