Javascript in the htmlb:inputField

[Former Member]

Here is the brief description of the problem:

I have a table view in which i display the htmlb:inputField which are created in the iterator. I need to capture the ENTER Key event and set the focus to the next field in the next row.

I have seen examples of the normal input field but couldnn't somehow figure out a way to do it in the htmlb:inputField. Here is the sample code which i tried to play around with (for normal input fields.)..

<i>function enter(nextfield) {

if(window.event && window.event.keyCode == 13) {

nextfield.focus();

return false; }

else

return true; }

</script>

Field 1: <input type="text" name="field1"

onkeypress="return enter(document.demo.field2)"><br>

Field 2: <input type="text" name="field2" onkeypress="return enter(document.demo.field1)"><br></i>

<b>How do i use this code in the iterator for my htmlb:inputField ? i did try the following attributes

1) submitOnEnter

2) onValueHelp

3) doValidate

but none on them could help me..

</b>..

Any help would be appriciated.

Amandeep.

[Former Member]

Hi Amandeep,

There is no onKeyPress event that can be declared for htmlb:inputfield.

Use

<%@ extension name="bsp" prefix="bsp" %>

<bsp:findAndReplace

find="<input"

replace="<input onKeyPress=func(next_field_p_cell_id)"

>

around your Tableview.

Regards,

Alwyn

P.S. Don't forget to assign reward points when you feel that the answers to your questions are valuable.

[Former Member]

Hi Alwyn,

Sorry for the answer. I tried to put it around the simple htmlb:inputfields, the event doesn't get fired.

Regards

Amandeep

[Former Member]

Hi Amandeep,

Try this code as a test application

<script>

function func()

{

alert(window.event.keyCode);

}

</script>

<%@ extension name="bsp" prefix="bsp" %>

<bsp:findAndReplace

find="<input"

replace="<input onKeyPress=func()">

<htmlb:inputField id = "authorfname1"

tooltip = 'tooltip1" tabindex="2'

value = "<%= authorfname %>" />

</bsp:findAndReplace>

I am getting number 13 on pressing enter.

Check your view->source on the browser for

...<input onKeyPress=func() ....>

There is no problem with firing the event. Check how you have passed the JS function to onKeyPress attribute and how it is displayed in the browser.

Regards,

Alwyn

[Former Member]

Hi Alwyn,

<b>

Works fine when i place it indivisually on the BSP.

I have not been able to figure out a way to do it in the iterator..</b>

<i><%@page language="abap" %>

<%@extension name="htmlb" prefix="htmlb" %>

<%@extension name="bsp" prefix="bsp" %>

<script language = "javascript">

function func(nextfield)

{

if(window.event && window.event.keyCode == 13) {

nextfield.focus();

return false; }

else

return true;

}

</script>

<htmlb:content design="design2003" >

<htmlb:page title="detail " >

<htmlb:form>

<bsp:findAndReplace find = "<input"

replace = "<input onKeyPress=func(authorfname2);" >

<htmlb:inputField id = "authorfname1"

tooltip = "tooltip1"

value = "<%= authorfname %>" />

</bsp:findAndReplace>

<br>

<bsp:findAndReplace find = "<input"

replace = "<input onKeyPress=func(authorfname3);" >

<htmlb:inputField id = "authorfname2"

tooltip = "tooltip1"

value = "<%= authorfname %>" />

</bsp:findAndReplace>

<br>

<bsp:findAndReplace find = "<input"

replace = "<input onKeyPress=func(authorfname1);" >

<htmlb:inputField id = "authorfname3"

tooltip = "tooltip1"

value = "<%= authorfname %>" />

</bsp:findAndReplace>

</htmlb:form>

</htmlb:page>

</htmlb:content></i>

<b>in the iterator i am trying to do like this</b>

<i> MOVE: p_row_index TO l_rindx,

p_column_index TO l_cindx.

CONCATENATE 'INPUT_' l_cindx '_' l_rindx

INTO l_id.

CONDENSE l_id NO-GAPS.

IF gv_mode = 'P'.

CREATE OBJECT l_input.

l_input->width = '100%'.

l_input->style = 'celldesign:GROUP_LEVEL3'.

l_input->id = l_id.

l_input->cellvalue = 'X'.

l_input->maxlength = 11.

l_input->value = l_string.

p_isreadonly = 'X'.

p_style = 'celldesign:GROUP_LEVEL3'.

• start test for the enter key

DATA: l_script TYPE string.

CONCATENATE ' "<input onKeyPress=func(' l_id ')"' INTO l_script.

CREATE OBJECT l_find_repl.

l_find_repl->find = '<input'.

l_find_repl->replace = l_script.

p_replacement_bee = l_find_repl.

• end test for the enter key

p_replacement_bee = l_input.</i>

<b>and on the main page i have my same function but doesn't do anything..</b>

<i><script language = "javascript">

function func(nextfield)

{

if(window.event && window.event.keyCode == 13) {

nextfield.focus();

alert ('hello');

return false; }

else;

return true;

}

</script></i>

Any suggestions will be appriciated.

Thanks in advance

Amandeep.

[Former Member]

Hi Amandeep,

First of all, bsp:findandreplace is to be used in the layout around Tableview as I told in my first reply, not in the render_cell_start .

Secondly, you cannot use findandreplace because you want to pass unique cell id for each row, to the JS. Sorry for misguiding you.

Finally, there is a work around for this.

<i>

concatenate 'Input box"'

'onKeypress="func('

into l_string separated by space.

concatenate l_string

p_row_index

')' into l_string.

into l_string separated by space.

l_input->tooltip = l_string</i>

L_string should look like

<i>tooltip(doublequotes) onkeypress=(doublequotes)func(..)</i>

BSP should create an onKeyPress event for the input boxes automatically when converting the elements to plain HTML.

Regards,

Alwyn

<i></i><i></i>

[Former Member]

Hi Alwyn,

the tooltip doesn"t help at all.

Any other solutions??

Regards

Amandeep

[Former Member]

Hi Amandeep,

Whats the problem???

did you check View->source to see how it is being interpreted by the browser?

Regards,

Alwyn

[Former Member]

Hi Alwyn,

The script is interpreted as a tooltip not as a function.

Regards

Amandeep

[Former Member]

Hi Amandeep,

Post your iterator code here & also the view->source.

I have used this technique in the tableview iterator of my application to implement a tabindex. It should work.

Regards,

Alwyn

[thomas_jung]

Now my JavaScript knowledge isn't anywhere near as good as I would like it to be, so perhaps I am shooting in the dark here; but instead of trying to force the event into the rendering of the inputfield, why not attach it after the fact.

use element.addEventListener for Non-IE

and element.attachEvent for IE 6+

The MSDN website makes it sound like this would work:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/attacheve...