sclass HInputField {
  S id = aGlobalID(), name, text;
  bool useWebSocket = true, debug;
  new MapSO params; // for <input> tag
  
  !include #1028121 // setField + change()
  bool requiresWebSocket() { ret useWebSocket; }
  bool requiresJQuery() { true; }
  
  S html() {
    new LS out;
    out.add(tag input("", paramsPlus(params,
      type := "text",
      +name,
      value := text,
      +id)));
    if (useWebSocket)
      out.add(hjs_escapedDollarVars([[
        (function() {
          if (typeof wsSend === 'undefined') return;
          var field = $("#" + $id);
          if (field.length == 0) return;
          var lastValue = field.val();
          field.on('change keydown paste input', function() {
            var value = field.val();
            if (lastValue == value) return;
            lastValue = value;
            wsSend(JSON.stringify({inputFieldText: {id: $id, text: value}}));
          });
        })();
      ]], +id));
    ret lines(out);
  }
  
  void onWebSocketJSON(Map map) {
    Map map2 = optCast Map(map.get("inputFieldText")), ret if null;
    S id = cast map2.get("id");
    if (!eq(id, this.id)) ret;
    S text = cast map2.get("text");
    if (text != null) {
      if (debug) print("Setting HInputField text: " + quote(text));
      setField(+text);
    }
  }
}