how to know which UI element is in focus

Question

I have an eventhandler function for a textbox, that does the following,

• Searches the contacts of the user and displays, the contacts that matches the pattern of the textbox

The same function should be done for two more textboxes.

Since the value of the textbox is obtained using "e.parameter.textbox1NAME", I have added two more functions as event handlers,

textbox2.addKeyUpHandler('search2');
textbox3.addKeyUpHandler('search3');

in addition to

textbox1.addKeyUpHandler('search1');

The only difference among the three functions is whether the pattern used is, "e.parameter.textbox1NAME" or "e.parameter.textbox2NAME" or "e.parameter.textbox3NAME"

I think this is inefficient, is there any way to know which element invokes the handler or which element is in focus? Thanks

Answer 1

If i understand it right, it's something like: I have 1-n boxes and want to bind a handler for a specific event to it. The solution (with jquery) is to use a selector for the dom objects (boxes) and attach a handler e.g. click to all of them like this:

$('.textboxes').click(function(e){
    console.log(e.currentTarge) // <-- Here current Target is your DOM Object.
})

Also the this reference is bound to the function copy, so it is executed with the context of the object. Check out the following Sites for examples: jquery click event or jquery bind function

Cheers Laidback

Answer 2

You can have a single function and figure out which text box was edited from e.parameter.source. For example

function onKeyUp(e){
  // Make sure the ID and the name of the widgets are the same.
  var src = e.parameter.source;
  var newValue = e.parameter[src]; 
  // Next steps
}

Since most of your questions are fairly basic, I suggest you do some research on stackoverflow, the issue tracker and the old Google Apps Script forum before putting up a question here.

Answer 3

Srik answer is very smart ! I liked it and wanted to give it a try... here is an example to illustrate !

function multitext_test() {
  var app = UiApp.createApplication().setHeight('150').setWidth('200');
  app.setTitle("test these textboxes");
  var panel = app.createFlowPanel();
  var txt1 = app.createTextBox().setName('txt1').setId('txt1');
  var txt2 = app.createTextBox().setName('txt2').setId('txt2');
  var txt3 = app.createTextBox().setName('txt3').setId('txt3');
  var label = app.createLabel('type in any of these textBoxes').setId('label')
  app.add(panel.add(txt1).add(txt2).add(txt3).add(label));
  var QHandler = app.createServerHandler("key").addCallbackElement(panel);
  txt1.addKeyUpHandler(QHandler);
  txt2.addKeyUpHandler(QHandler);
  txt3.addKeyUpHandler(QHandler);
//  
  var doc = SpreadsheetApp.getActive();
  doc.show(app);
}
//
function key(e){
  var app = UiApp.getActiveApplication();
  var src = e.parameter.source;
  var newValue = e.parameter[src]; 
  var act= app.getElementById(src)
  label = app.getElementById('label')
  label.setText("You typed '"+newValue+"' in textBox nr "+src.substring(3));
  act.setStyleAttribute('background','yellow');
  return app
}