Suppose an input is defined as:
{view:'input', id:'f', value:'', placeholder:'',width:100, inputWidth:100, align:'left', popup:'fp'}In chrome, the popup appears when I use the mouse and click into the field. However when using the tab key to move into the field the popup does not open.
Is possible to have the popup open when the field receives focus and close the popup onblur?
It might be best to describe what I am trying to do…
There are 4 fields (f1,f2,f3,f4) and each has a popUp (p1,p2,p3,p4). Each popUp shows a grid of values. When f1 has focus, p1 appears with it’s grid of values.
When a value in the grid is clicked, then f1 is updated with the value, then focus is moved to f2, p1 closes and p2 opens.
Then when a value is clicked in it’s grid, f2 is updated and then focus is moved to f3 and it’s popup appears and the pattern repeats.
As far as understood you asked about desktop usage. Try the following:
...
{
view:"text",
...,
popup: "...",
on:{
onAfterRender: setInputEvents
}
},
...
function setInputEvents(){
var inp = this.getInput();
dhx.event(inp,"focus",dhx.bind(showPopup,this));
dhx.event(inp,"blur",dhx.bind(hidePopup,this));
}
function showPopup(e){
e = e||event;
$$(this.config.popup).show(e.target||e.srcElement,"bottom",true);
}
function hidePopup(e){
$$(this.config.popup).hide();
}
Is there a method to open a popup associated with a particular field?
If so I could call this function inside of a onfocus event and I think I could accomplish this task.
The method would need to open the popup under the field with the pointer pointing to the field as:
Thank you for your help. I am making progress.
I am having a problem on the iPad, so I created a demo to replicate.
The demo has 4 input fields. The first input field is associated with a popup.
After the page loads, touch the first field. The cursor moves to the input and the popup should appear…it does not. Now touch the 2nd field. The cursor moves to the 2nd field as it should. Now touch the first field again. This time the popup opens.
I need for the popup to open each time the cursor is moved to the first field.
Please test on the iPad using Safari. Please see the attached .zip file.
_popup.zip (207 KB)
Does the new demo relate the previous issue ? There is not a code with the solution I posted in previous reply.
function setInputEvents(){
if(!dhx.env.touch){
var inp = this.getInput();
dhx.event(inp,“focus”,dhx.bind(showPopup,this));
dhx.event(inp,“blur”,dhx.bind(hidePopup,this));
}
}
Sorry for the confusion… the demo is not directly related to the prior posts. I can start a new topic if needed.
Please test the demo on an iPad ios 5.1 / Safari.
There is only one popup in the demo. The popup does not open when you touch the input. You have to touch another input and then touch the first input (for the 2nd time) for the popup to open.
I hope that makes sense. The first time you touch the field with the popup, the popup does not open.
That fixed it. Thank you.