フィールドで .focus() を使用する方法Issue ServiceNow ユーザーから、フィールドにフォーカスを設定する方法を要求されることがよくあります。詳しく説明すると、フィールドへのフォーカスの移動は、そのフィールドをアクティブにすることであり、通常は Web ページでユーザーに表示したい HTML 要素にスクロールすることです。 このアクションはさまざまな状況で必要になりますが、主にユーザーが情報不足のままフォームを送信しようとしたときに要求されます。そのフィールドは必須に設定され、フォーカスはユーザーに表示し、入力を促すフォームのフィールドに設定されます。Resolution免責事項:次の手順では、ServiceNow で提供されていない関数を使用しています。そのため、ServiceNow サポート対象の範囲外になります。これらの関数が提供する機能によって問題が発生したり、動作が停止したりした場合は、実装者がその問題を是正する必要があります。 .focus() メソッドのドキュメントには、「要素へのフォーカスに使用される (フォーカスできる場合)」と記載されています。つまり、このメソッドは HTML 要素でのみ使用でき、すべての要素が関数 https://www.w3schools.com/jsref/met_html_focus.asp をサポートしているわけではありません このことを念頭に置き、まず .focus() メソッドを使用するフォームでフィールドの HTML 要素を有効にする必要があります。ServiceNow のクライアント側「GlideForm」API では、getControl() や getElement() など、これを実行できる関数がいくつか提供されます。 GlideForm に関するドキュメントへのリンクは、[追加情報] セクションを参照してください。 2 つのメソッドからいずれかを選択して、.focus() 関数と組み合わせることができます。 フィールドが見える位置に移動せず、.focus() 関数が機能しないように見える場合があります。 これはたいてい、要素がすでにアクティブであることが原因です。.focus() 関数は、指定された要素をフォーム上の「アクティブ」要素に設定し、それによって Web ページにその要素をスクロールさせて表示するものです。 ただし、既にアクティブな要素に .focus() を使用しても、既にアクティブな要素をアクティブに設定することはできないため、想定されている JavaScript の動作では要求が無視されます。 これは、ブラウザのコンソールからテストできます。インシデントフォームを開き、コンソールを開きます。 1.コンソールで「var element = g_form.getControl('short_description').focus();」を使用します。スクロールしていなければ、フォームがスクロールし、[簡単な説明] フィールドが表示されます。 2.次に、「element」をコンソールに入力すると、出力として [簡単な説明] の HTML 要素が表示されます。 3.次に、「document.activeElement」をコンソールに入力すると、出力として同じ HTML 要素が表示されます。 4.フォーム上で何もクリックせずに、[簡単な説明] フィールドが表示から外れるまでページをスクロールします。 5.「element.focus();」をコンソールに入力すると、フォームが移動しないことがわかります。 この動作により、実際には機能しているのに、focus() 関数が機能しないと多数の開発者が信じる可能性があります。 フィールドにフォーカスを設定しても要求どおりに動作しない場合は、別の方法としてフォームをスクロールし、フィールドを表示させます。 JavaScript には .scrollIntoView() という別の関数が含まれています https://www.w3schools.com/jsref/met_element_scrollintoview.asp この関数の説明は、「指定された要素をブラウザウィンドウの表示領域にスクロールする」です。この関数は、要素がすでにアクティブであるかどうかを問いません。 最後にもう 1 つ... フォームの送信時に必須フィールドへの注意喚起のためにこのタイプの機能をフォームに実装しようとしている場合、.focus() も .scrollIntoView() も機能しないことがあります。この原因の 1 つとして、必須フィールドをユーザーに通知するバナーメッセージがフォームに追加されていることが考えられます。 このメッセージは、GlideForm の「addErrorMessage()」関数によってフォームに追加されます。これは単に、この関数を使用すると、フォームのフォーカスが新しく作成されたメッセージに設定されるため、指定したフィールドにフォーカスが設定されていないように見えているのです。フォーカスはフィールドに設定されていますが、エラーメッセージが後で追加されたため、フォーカスが新しいメッセージに移ります。したがって、フォーカスは正しく設定されており、非常に高速に変化しているだけです。 Related Linksドキュメント:- GlideForm