Question

我有一个简单的GAS表单，我想要移动设备友好。这是它的样子：

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

Q1-我希望表单能够自动缩放以适应（移动）屏幕。它是使用GUI编辑器构建的。文本框设置为按宽度和高度的百分比缩放。

我不知道HTML5，但似乎这是移动格式化的方法。您可以将HTML5集成到GUI编辑器使用的代码中吗？您是否在GUI Editor中有任何其他格式化建议？

Q2 - 我希望它不是将文本放在文本框中，而是将占位符文本在选中此框时消失。这可能吗？

谢谢，森

Answer 1

Q1：我无法完全回答，但看起来您可以使用setWidth，setHeight或setSize将大多数元素设置为百分比宽度和高度。

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;
}

Answer 2

对于textholder事物，可以使用验证器在没有serverhandler的情况下完成。

  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'));

GAS ... Gui Editor ...移动表格

2 个答案: