Hi Clifton,
I'm still struggling with the touchscreen functions. Some of my original features like a drag and drop system are just not possible with a touchscreen so I have added a special 'tool' group to do these tasks in another way. This seems to work as planned. I am now stuck on entering the password with a touchscreen. As I mentioned before, I do not want to use a password type input because this triggers the browser to save the password again (often at a later and inappropriate stage in the program). And apparently and more importantly you can only save one password per site. So I am using this
- Code: Select all
<response>
<pgStyleObject>
<![CDATA[
{ theStyle : "font-size",
propVal : "19px" }
]]>
</pgStyleObject>
<function name="myKeyDown" event="keydown" params="e">
<![CDATA[
if (sharedActions.isPwd == true)
{
if (e.keyCode == 8) //backspace
{
var txt = sharedActions.holdCode;
var L = txt.length;
if (L < 3)
{
tbfunction_pgTBObjSet("response", "text", "");
sharedActions.holdCode = "";
return;
}
L -= 1;
var newTxt = "";
var i;
for (i = 0; i < L; i ++)
{
newTxt = newTxt + txt[i];
}
sharedActions.holdCode = newTxt;
L = newTxt.length;
sharedActions.showDots(L);
}
else if (e.keyCode == 13) //enter
{
var fct = function()
{
sharedActions.getResult();
return;
}
setTimeout(fct, 750);
}
else if (e.keyCode == 46) //delete
{
e.preventDefault();
sharedActions.holdCode = "";
sharedActions.showDots(0);
}
else if (e.keyCode == 16 || e.keyCode == 20) //Shift or Caps lock
{
return;
}
if (sharedActions.mouse == 0) //Touchscreen
{
var fct = function()
{
var txt = tbfunction_pgTBObjGet("response", "text");
if (txt)
{
var L = txt.length;
L -= 1;
var dot = '\u2022';
var char = txt[L];
if (char == dot)
{
return;
}
sharedActions.holdCode = sharedActions.holdCode + char;
L = sharedActions.holdCode.length;
sharedActions.showDots(L);
}
}
setTimeout(fct, 100);
}
}
]]>
</function>
<function name="showDots" event="" params="charNo">
<![CDATA[
//var dot = '\u26ab';
var dot = '\u2022';
var txt = "";
var i;
for(i = 0; i < charNo; i++)
{
txt = txt + dot;
}
tbfunction_pgTBObjSet("response", "text", txt);
]]>
</function>
This works on the pc but on the tablet it uses autocomplete and makes a complete mess of my system. I need to turn off the autocomplete. I tried to do this by using getHTMLContent / setHTMLContent and pgReplace to change
input type to
input autocomplete="false" type in the parent object of the input like this:
var result = tbfunction_getHTMLContent("mover");
result = tbfunction_pgReplace("input type", "input autocomplete=" + String.fromCharCode(34) + false + String.fromCharCode(34) +" type", result);
tbfunction_setHTMLContent("mover", result); in the HTML content below.
- Code: Select all
<span id="sys228" style="background: transparent none repeat scroll 0% 0%; height: 172px; width: 427px; visibility: inherit; z-index: 32813; color: rgb(0, 0, 0); font-family: "MS Sans Serif"; font-size: 11px; font-style: normal; position: absolute; left: 21px; top: 24px; overflow: hidden;"><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 427px; height: 172px; background: transparent url("../dialog/BG-UL.png") no-repeat scroll left top;"></div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 427px; height: 172px; background: transparent url("../dialog/BG-BL.png") no-repeat scroll left bottom;"></div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 427px; height: 172px; background: transparent url("../dialog/BG-UR.png") no-repeat scroll right top;"></div><div style="position: absolute; overflow: hidden; left: 0px; top: 0px; width: 427px; height: 172px; background: transparent url("../dialog/BG-BR.png") no-repeat scroll right bottom;"></div><div style="position: absolute; overflow: hidden; left: 12px; top: 0px; width: 403px; height: 172px; background: transparent url("../dialog/BG-BOT.png") repeat-x scroll left bottom;"></div><div style="position: absolute; overflow: hidden; left: 12px; top: 0px; width: 403px; height: 172px; background: transparent url("../dialog/BG-UPPER.png") repeat-x scroll left top;"></div><div style="position: absolute; overflow: hidden; left: 0px; top: 12px; width: 427px; height: 148px; background: transparent url("../dialog/BG-LEFT.png") repeat-y scroll left top;"></div><div style="position: absolute; overflow: hidden; left: 0px; top: 12px; width: 427px; height: 148px; background: transparent url("../dialog/BG-RIGHT.png") repeat-y scroll right top;"></div><div style="position: absolute; overflow: hidden; left: 12px; top: 12px; width: 403px; height: 148px; background-color: black; opacity: 0.65;"></div></span><span id="sys229" style="background-color: rgb(255, 255, 255); border: 1px solid rgb(0, 0, 0); height: auto; width: 429px; visibility: inherit; z-index: 32814; color: rgb(0, 0, 0); font-family: "MS Sans Serif"; font-size: 16px; font-style: normal; position: absolute; left: 6px; top: 29px; padding: 42px 40px 70px; overflow: hidden;">Importante. ¿Utiliza un ratón o una pantalla táctil?</span><span id="sys225" style="background-color: rgb(240, 240, 240); height: 66px; width: 428px; visibility: inherit; z-index: 32815; position: absolute; left: 7px; top: 9px; cursor: default; pointer-events: auto; touch-action: none;">
<span id="sys230" class="syshidden">
<img id="sys227" src="../media/14.gif" width="428" height="66" border="0">
</span>
<span id="sys231" style="position: absolute; left: 0px; top: 0px; width: 428px; height: 66px; visibility: inherit;">
<img id="sys226" src="../media/15.gif" width="428" height="66" border="0" align="top">
</span>
<span id="sys232" style="position: absolute; left: 0px; top: 0px; text-align: center; visibility: hidden; color: rgb(0, 0, 0); font-family: MS Sans Serif; font-size: 11px; font-style: normal; opacity: 1;">
</span>
</span><span id="sys233" style="background-color: rgb(192, 192, 192); border: 2px outset rgb(255, 255, 255); height: 33px; width: auto; visibility: inherit; z-index: 32816; color: rgb(0, 0, 0); font-family: "Arial"; text-align: center; font-size: 19px; font-style: normal; position: absolute; left: 119px; top: 132px; overflow: hidden; padding-top: 3px; padding-left: 14px; padding-right: 14px; cursor: pointer; touch-action: none;">Ratón</span><span id="sys234" style="background-color: rgb(192, 192, 192); border: 2px outset rgb(255, 255, 255); height: 33px; width: auto; visibility: hidden; z-index: 32817; color: rgb(0, 0, 0); font-family: "Arial"; text-align: center; font-size: 19px; font-style: normal; position: absolute; left: 190px; top: 132px; overflow: hidden; padding-top: 3px; padding-left: 14px; padding-right: 14px; cursor: pointer; touch-action: none;">OK</span><span id="sys235" style="background-color: rgb(192, 192, 192); border: 2px outset rgb(255, 255, 255); height: 33px; width: auto; visibility: inherit; z-index: 32818; color: rgb(0, 0, 0); font-family: "Arial"; text-align: center; font-size: 19px; font-style: normal; position: absolute; left: 261px; top: 132px; overflow: hidden; padding-top: 3px; padding-left: 14px; padding-right: 14px; cursor: pointer; touch-action: none;">Pantalla</span><span id="sys236" style="background-color: rgb(255, 255, 255); height: 27px; width: 51px; visibility: hidden; z-index: 32819; color: rgb(0, 0, 0); font-family: "Arial"; font-size: 21px; font-style: normal; position: absolute; left: 352px; top: 158px; overflow: hidden; background-image: url("../media/eye.gif"); cursor: pointer; touch-action: none;"></span><input type="text" value="" onfocus="TBK._Ffocus(p0.o139,true);" onblur="TBK._Ffocus(p0.o139,false);" id="sys237" style="border: 1px solid rgb(0, 0, 0); height: 30px; width: 362px; visibility: hidden; z-index: 32820; color: rgb(0, 0, 0); font-family: "MS Sans Serif"; font-size: 19px; font-style: normal; position: absolute; left: 37px; top: 122px; overflow: hidden; background-color: transparent; margin: 0px; padding-bottom: 2px;" name="response">
but this did not work. Can you help please?
John
UPDATE I have now actually got it to work on the tablet. Apparently autocomplete is a tricky subject in Chrome see
https://stackoverflow.com/questions/30053167/autocomplete-off-vs-false I used this to do it:
- Code: Select all
<function name="getObj2" event="" params="">
<![CDATA[
var iframe = document.getElementById('syspageFrame');
var innerDoc = (iframe.contentDocument);
this.obj2 = innerDoc.getElementById("sys237");
this.obj2.autocomplete="chrome-off"; // chrome-off was suggeted by someone on Stack-Overflow
]]>
</function>
It's still not as I'd like because the autocomplete field still appeared but this time it did not interfere with my system.
UPDATE 2Clifton don't waste any time on this. It's driving me nuts! Just to make one or two things clear: Chrome autofill was not filling in the text but it was providing unhelpful prompts in a field just below. I decided to change the field in the tbk to wordwrap. In this way a textarea is created instead of an input. This made no difference. I have two users on my test site. Bill BlOGGS and John Robin DOVE. Their passwords are bloggs and dove. I have been using bloggs's account most of the time and stuff like
bl blo or even
bloggsbloggs kept appearing. Finally this evening I used The other account with dove as the password. This time Chrome made no unhelpful suggestions not even the second time I entered the password. I can only think that the
bl blo stuff must be hidden away somewhere in Chrome and it keeps on using it even though I emptied the Chrome cache on the tablet every time. The last change I made was this:
this.obj2.autocomplete = "new-password" So it seems the problem is solved but I'll test it again tomorrow.