新規投稿
フォローする

作成したテキストボックスにフォーカスをあてる

Avatar
kuma

いつもお世話になっております。

こちらのページを参考に一覧画面に3つのテキストボックスを作成しました。

今、困っているのは一覧画面を開いた際に作成したテキストボックスにフォーカスがあてられないことです。

こちらのページやこちらのページを参考に下記のコードが使えないか、考えてみたのですが、そもそも要素名が良くわかりませんでした。

作成したテキストボックスを右クリックし、要素を調査しても

<input style="width: 150px;">というものが表示されるだけでIDはわかりませんでした。

IDの調べ方、もしくは付与の仕方をご存知でしたらご教授いただけますと幸いです。

 

document.getElementById(label).focus();

var elem = $('#record-gaia').find('.target-element');
elem.focus();
1

4件のコメント

Avatar
文系男

kuma さん

こんにちは！

 

アプリに「文字列(1行)」フィールドを配置している場合、

レコードの作成や編集時に要素を取得したい入力欄にマウスカーソルをあてて、

右クリック > 要素の検査 でクラス名を確認できますよ！

 

ちなみに文字列（1行）フィールドのクラス名は "input-text-cybozu" となっておりました。

 

また、以下のような処理でアプリの左上から 1つ目の「文字列（1行）」フィールドに

フォーカスをあてることができました。

 

var ele = $('.input-text-cybozu').eq(1);
ele.focus();

 

参考になれば嬉しいです。

1
Avatar
文系男

kuma さん

 

申し訳ありません。私の認識が誤っていたかもしれません。。。

作成したテキストボックスということは、以下のようにテキストエリアを自作して、

ヘッダーや「スペース」フィールドに表示させている、ということでしょうか。

 

var textarea_element = document.createElement("textarea");   
kintone.app.getHeaderMenuSpaceElement().appendChild(textarea_element);

 

上記であっているなら、以下の処理で画面が開いた際に自動的に入力欄にフォーカスを

あてることは可能でした。

var textarea_element = document.createElement("textarea");
textarea_element.id = "aaa";

kintone.app.getHeaderMenuSpaceElement().appendChild(textarea_element);
document.getElementById("aaa").focus();

 

参考になりますが、作成した要素に id や class を付与するなら以下のような記載で可能でした。

//id付与
label.id = "label";

//class付与
label.classList.add("label");

 

参考になりましたら嬉しいです。

1
Avatar
kuma

文系男さん

お返事いただきありがとうございます。

まさにやりたいことは2つ目に投稿していただいたものでした。説明が拙く申し訳ありませんでした。

idやclassの付与の方法をご教授いただき誠にありがとうございます！

1
Avatar
文系男

kuma さん

 

お役に立ててよかったです！

 

なお、参考リンクや要素の検証内容を記載していただいているにも関わらず

勘違いをしたのは私の方で、kuma さんの説明に問題はなかったです！

0
サインインしてコメントを残してください。