Focus

[Nic]

Hi,

I am trying to trap an onblur event in an inputtext box, which when called validates the input, and if it fails resets the focus back to the inputtext.

My onblur is firing, when I tab out, and I get my error message, but it does not seem to refocus back to the control.

any suggestions what I might be doing wrong?

Thanks

Nic

[antun]

How are you resetting the focus back to the input text box?

-Antun

[Nic]

I have actually tried two ways, let me explain:

1. I have created a class called <class name="mytextfield"> which contains an input text field.

I use this in my code to allow input. On the declaration I declare an OnBlur event. This event calls a check() method which evaluates the content, if invalid it tries to reset the focus, using this.setAttribute("focus",true);

The interesting thing is that it seems that in this instance OnBlur never gets called, either on a tab or mouse move.

2. I use the vanilla inputtext and declare an OnBlur event. This gets called but the call to this.setAttribute("focus", true) does not seem to set the focus back to the control that fired OnBlur.
c
I suspect the first is a probalem with my custom class. The focus doesn't seem to be where I expect it, i.e. on the inputtext box. Secondly for some reason the
call to setfocus seems to fail.

Any help on subclassing controls and understanding the focus would be really helpful.

Cheers

Nic

[antun]

Well, to set the keyboard focus of a view, you use the LzFocus service:

<canvas debug="true">

<view y="20" x="100">
<simplelayout axis="y" spacing="10" />

<inputtext id="bar" bgcolor="red" />
<inputtext id="foo" bgcolor="yellow" />
<inputtext id="ta" bgcolor="blue" />
</view>

<button>Set the focus to the second text field.
<method event="onclick">
LzFocus.setFocus( foo );
</method>
</button>
</canvas>


That should let you make headway with the method # 2 you described.

As for method #1, remember that you're nesting a text field inside of a view (which might not have been necessary, because you could always do <class name="mytextfield" extends="inputtext">, not sure if that helps you BTW). You would probably need to write some code that transfers keyboard focus from the enclosing view (it's a view because class extends view by default) to the inputtext when the enclosing view receives focus. You'll probably need to set the class'es focusable attribute to true when you declare it.

-Antun

[Nic]

Thanks Antun. This seems to do the job for the focus.

On a related topic. I have a nested inputtext box inside mytextfield class so I can change the look and feel. Effectively I am trying to create an input box with a border! To do this I am setting a background color and then offsetting the input box by 1 pixel to create a border.

I understand I am nesting controls, and that I may need to transfer the mouse keyboard focus from the outer class mytextfield to the inputtext box, but:

1. How do I do this?

and

2. How do I declare an OnBlur on the inputtext box when I use it. At the moment I have the OnBlur method inside the class for MyTextField. This though means that every time I use the mytextfield tag, I have the same OnBlur functionality. I would like different code to be executed when I get an OnBlur. I can see how to do this if I extend from inputtext, but if I do this I can't see how to change the look of the control if I do this.

Any help on subclassing controls and understanding the focus would be really helpful.

Cheers

Nic

p.s. the code for mytextfield is:

<class name="mytextfield" width="300" height="16" bgcolor="0x7E7E7E" focusable="true">
<attribute name="required" value="false" />
<attribute name="errorColor" type="number" value="0xff0000" />
<attribute name="originalBackgroundColor" type="number" value="0x7E7E7E" />
<attribute name="validator" value="null" />
<attribute name="label" type="string" value=""/>
<simplelayout axis="x" spacing="10"/>
<text bgcolor="0xffffff" name="txtLabel" width="$once{(parent.width/3)}" height="$once{parent.height}" align="right" valign="middle"/>
<inputtext valign="middle" name="textField" resizable="false" bgcolor="white" x="$once{(parent.width/3)+1}" y="1" width="$once{(parent.width/1.5)-2}" height="$once{parent.height-2}">
<method event="onblur">
this.setAttribute('focus',true);
debug.write('blur');
if (this.getText()=='')
{
debug.write('empty');
parent.txtError.setText('Need a ' + parent.txtLabel.getText());
parent.showError();
LzFocus.SetFocus(
}
else
{
debug.write('OK');
parent.txtError.setText('');
parent.showOK();
}
</method>
</inputtext>
<text fgcolor="0xff0000" name="txtError" width="150" height="16" align="right" valign="middle"/>
<animator name="anmFocus" attribute="bgcolor" to="16711680" duration="500" start="false" repeat="Infinity"/>

<method event="oninit">
this.txtLabel.setText(this.label);
debug.write('init');
</method>

<method name="getText">
return this.textField.getText();
</method>

<method name="setText" args="text">
return this.textField.setText(text);
</method>

<!-- Highlight the border of the field the specified error color -->
<method name="showError">
this.setAttribute( 'bgcolor', this.errorColor );

</method>

<!-- Return the background color of the field to show it's
filled out -->
<method name="showOK">
this.setAttribute( 'bgcolor', this.originalBackgroundColor );
</method>

<method name="setFocus">
this.textField.setFocus();
</method>


</class>