1

モバイルフレンドリーになりたいシンプルなGASフォームがあります。これがどのように見えるかです：

https://script.google.com/macros/s/AKfycbxn6ZasFshHZ6AR0TQzPCv0CUtVNBVbWLSwt1fbOtnc/dev

Q1-（モバイル）画面に合わせてフォームを自動的に拡大縮小したいのですが。GUIエディタを使用して構築されました。テキストボックスは、幅と高さの％として拡大縮小するように設定されています。

HTML5はわかりませんが、モバイルフォーマットを採用する方法のようです。GUIエディターが使用するコードにHTML5を統合できますか？GUIエディター内で他にフォーマットの提案はありますか？

Q2-テキストボックスにテキストを入れるのではなく、ボックスを選択すると消えるプレースホルダーテキストにしたいのですが。これは可能ですか？

ありがとう、ネイサン

4

2 に答える 2

2

Q1：完全に答えることはできませんが、、、、またはを使用してsetWidth、ほとんどの要素をパーセンテージの幅と高さに設定できるようです。setHeightsetSize

Q2：onFocusハンドラーを設定して、ユーザーがフィールドをクリックしたときにテキストが消えるようにします（このアクションは要素の「フォーカス」と呼ばれます）。これはClientHandlerを使用して実行できます。つまり、高速になります。

var text = app.createTextBox().setId("textbox").setName("textbox")
    .setStyleAttribute("color","gray").setValue("Input text here");
var focusHandler = app.createClientHandler().forEventSource().setText("")
    .setStyleAttribute("color","black");
text.addFocusHandler(focusHandler);

ユーザーがフィールドを空白のままにした場合は、元のテキストに戻して再び灰色にすることができますが、フィールドが空白かどうかを確認する必要があるため、今回はServerHandlerを使用する必要があります。また、フィールドを離れることは「ぼかし」と呼ばれます。

var blurHandler = app.createServerHandler("textboxBlurred").addCallbackElement(text);
text.addBlurHandler(blurHandler);
...
function textboxBlurred(e) {
  var app = UiApp.getActiveApplication();
  if (e.parameter.textbox=="") {
    var box = app.getElementById("textbox");
    box.setValue("Input text here");
    box.setStyleAttribute("color", "gray");
  }
  return app;
}
于 2013-02-11T01:29:45.110 に答える
2

テキストホルダーの場合、バリデーターを使用することで、サーバーハンドラーなしでそれを行うことができます。

  var textbox = app.createTextBox().setValue('placeholder').setStyleAttribute('color', 'gray');
  textbox.addFocusHandler(app.createClientHandler().validateMatches(textbox, '^placeholder$').forEventSource().setText('').setStyleAttribute('color','black'));
  textbox.addBlurHandler(app.createClientHandler().validateLength(textbox, 0, 0).forEventSource().setText('placeholder').setStyleAttribute('color','gray'));
于 2013-09-20T21:32:32.147 に答える