Question

我的条件是我有一个文本框和一个按钮，当用户在文本框中输入内容并按回车键时，我想使用与该按钮相同的处理程序。我看到文本框中有一个名为addKeyUpHandler的函数，但该函数似乎只能像下面的例子一样工作。

  // Create handler to mark the input in textBoxB as valid
  var onInvalidInput1 = app.createClientHandler()
      .validateNumber(textBoxB)
      .forTargets(textBoxB).setStyleAttribute("color", "black");

  // Add all the handlers to be called when the user types in the text boxes
  textBoxA.addKeyUpHandler(onInvalidInput1);

Answer 1

我认为你不能用ClientHandlers做到这一点。你当然可以使用ServerHandlers。皮肤猫的方法不止一种，但这种方法很有效，所以玩这样的游戏。在这里，我使用两个不同的ServerHandler，一个用于TextBox，另一个用于Button，并将它们连接到一个常见的doAction函数。您当然可以为它们使用单个处理程序，但这会增加发送到服务器的每个keyUp事件的开销，甚至在您知道它是有效数字之前。

// Script-as-app template.
function doGet() {
  var app = UiApp.createApplication();

  var textbox = app.createTextBox().setName('textbox');
  app.add(textbox);
  var button = app.createButton('Click Me');
  app.add(button);
  var label = app.createLabel('___').setId('lbl');
  app.add(label);

  // only fire ServerHandler for onKeyUp if it passees validation
  var textBoxHandler = app.createServerHandler('textBoxHandlerFunction').validateNumber(textbox);
  var buttonHandler = app.createServerHandler('buttonHandlerFunction');
  textBoxHandler.addCallbackElement(textbox);
  buttonHandler.addCallbackElement(textbox);

  textbox.addKeyUpHandler(textBoxHandler);
  button.addClickHandler(buttonHandler);

  return app;
}

function textBoxHandlerFunction(e) {
  var app = UiApp.getActiveApplication();
  if(e.parameter.keyCode == 13)
  {
    app = doAction(app, e);
  }
  return app;
}

function buttonHandlerFunction(e) {
  // missing validation that textbox is a number
  return doAction(UiApp.getActiveApplication(), e);
}

function doAction(app, e)
{
  // do your stuff
  app.getElementById('lbl').setText('fired...' + e.parameter.textbox);
  return app;
}

Answer 2

我终于使用了下面的代码。

function doGet() { 
  var tb_search = myapp.createTextBox().setName('tb_search').setId('tb_search').setWidth(LENGTH_MIDDLE)
  var btn_search = myapp.createButton('Go').setId('btn_search');  

  var h_search = myapp.createServerClickHandler('procSearch');
  h_search.addCallbackElement(tb_search);  
  btn_search.addClickHandler(h_search);      

  var h_tb_keyup = myapp.createServerHandler('procSearch') 
  tb_search.addKeyUpHandler(h_tb_keyup)
}


function procSearch(e) {
  var app = UiApp.getActiveApplication(); 
  // return if the key is not enter.     
  if((e.parameter.eventType=="keyup") && (e.parameter.keyCode != 13))
  {
    return app;
  }
}

如何在文本框上添加键加事件以捕获用户的“输入”输入

2 个答案: