custom touch functions
25 posts
• Page 3 of 3 • 1, 2, 3
Re: custom touch functions
by Clifton » Fri Jun 25, 2021 11:43 am
What is the purpose of preventDefault() in your system?
- Clifton
- Site Admin
- Posts: 732
- Joined: Tue Jan 14, 2014 1:04 am
Re: custom touch functions
by John Robin Dove » Fri Jun 25, 2021 12:07 pm
It prevents what the user is typing from going into the text field.
- John Robin Dove
- Posts: 486
- Joined: Thu Jan 23, 2014 4:35 am
Re: custom touch functions
by John Robin Dove » Sat Jun 26, 2021 6:28 am
Hi Clifton,
Here is my latest solution https://www.w3schools.com/code/tryit.asp?filename=GRVVZURQK0M2. Unfortunately I can't make it work with a tbk object. Perhaps you can help me with this please? If not, I can always use it as it is in an iframe via pgGotoURL.
John
Here is my latest solution https://www.w3schools.com/code/tryit.asp?filename=GRVVZURQK0M2. Unfortunately I can't make it work with a tbk object. Perhaps you can help me with this please? If not, I can always use it as it is in an iframe via pgGotoURL.
John
- John Robin Dove
- Posts: 486
- Joined: Thu Jan 23, 2014 4:35 am
Re: custom touch functions
by Clifton » Sat Jun 26, 2021 7:40 am
The link you provided is very interesting.
To make it work inside a TBK iframe.
Create your <textarea> using a <make> tag and specify level="1" so the <textarea> gets created inside the ToolBook iframe. Also, for the dims parameter specify the name of the object to mask (e.g., dims="myPassword"). Finally, specify the stacking order to start at your ToolBook password field (e.g., refObj="myPassword").
The above will create a vanilla <textarea> in the ToolBook iframe that will not be influenced by various ToolBook functions. Do not use the useTB="true" parameter when creating functions on the newly created element as they will have no effect. The code might look like this:
NOTE: As indicated above, make sure to set your ToolBook field "myPassword" to "hidden" so it cannot interfere with anything.
One other issue with the w3schools example. If I press enter in the field, the caret gets misplaced. To fix this just call tbfunction_setCaret() on either keyup or keydown to move the caret to the end of the field when an enter key or an arrow key is detected.
To make it work inside a TBK iframe.
Create your <textarea> using a <make> tag and specify level="1" so the <textarea> gets created inside the ToolBook iframe. Also, for the dims parameter specify the name of the object to mask (e.g., dims="myPassword"). Finally, specify the stacking order to start at your ToolBook password field (e.g., refObj="myPassword").
The above will create a vanilla <textarea> in the ToolBook iframe that will not be influenced by various ToolBook functions. Do not use the useTB="true" parameter when creating functions on the newly created element as they will have no effect. The code might look like this:
<make type="textarea" id="fakePwd" level="1" dims="myPassword" class="" refObj="myPassword" autoAlign="" replace="">
<!--Style and set functions, etc.-->
</make>
<myPassword>
<pgTBObjSet>
{ myProp : "visible",
myValue : false }
</pgTBObjSet>
</myPassword>
NOTE: As indicated above, make sure to set your ToolBook field "myPassword" to "hidden" so it cannot interfere with anything.
One other issue with the w3schools example. If I press enter in the field, the caret gets misplaced. To fix this just call tbfunction_setCaret() on either keyup or keydown to move the caret to the end of the field when an enter key or an arrow key is detected.
- Clifton
- Site Admin
- Posts: 732
- Joined: Tue Jan 14, 2014 1:04 am
Re: custom touch functions
by John Robin Dove » Sat Jun 26, 2021 1:25 pm
Thanks for your reply. I tried and tried but could not find a solution using <make>. I managed to make the required textarea object but it refused to respect color: white; caret-color: black; It always set color back to black. I also require the textarea to be part of my draggable requestGroup object. I could not achieve this with mergeTBObjects so I decided to go for the pgGotoURL option. Re. enter and arrow keys I have found solutions. I think the problem was that because I am using a textarea a line break is going into the text so the solution is to remove it immediately. You can view the result here https://www.mediacours.com/006/request3/ and this is the html:
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<style>
.example1 {
color: white;
caret-color: black;
resize: none;
height: 25px;
width: 340px;
font-family: 'Lucida Console', monospace;
font-size: 22px;
padding-left: 5px;
overflow: hidden;
}
.example2 {
display: block;
position: absolute;
top: 12px;
left: 15px;
width: auto;
font-family: 'Lucida Console', monospace;
font-size: 20px;
}
</style>
</head>
<body>
<textarea id="response" class="example1" value="" onkeydown="showDots()"></textarea><br><br>
<div id="dots" class="example2"></div>
<script>
function setFocus()
{
var obj1 = document.getElementById("response");
obj1.focus();
}
function showDots()
{
var fct = function()
{
var obj1 = document.getElementById("response");
var txt = obj1.value;
txt = txt.replace(/(\r\n|\n|\r)/gm, ""); //get rid of line break(s)
obj1.value = txt;
var dot = '\u2022';
var L = txt.length;
txt = "";
var i;
for(i = 0; i < L; i++)
{
txt = txt + dot;
}
var obj2 = document.getElementById("dots");
obj2.innerHTML = txt;
moveCaretToEnd();
}
setTimeout(fct, 100);
}
function showPwd()
{
var obj1 = document.getElementById("response");
var txt = obj1.value;
var obj2 = document.getElementById("dots");
obj2.innerHTML = txt;
}
function hidePwd()
{
var obj2 = document.getElementById("dots");
obj2.innerHTML = "";
showDots();
}
function moveCaretToEnd() {
var el = document.getElementById("response2");
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length + 1;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}
function getResult()
{
var obj1 = document.getElementById("response");
var obj2 = document.getElementById("dots");
var txt = obj1.value;
top.tbfunction_pgTBObjSet("result", "text", txt);
obj1.value = "";
obj2.innerHTML = "";
}
</script>
</body>
</html>
- John Robin Dove
- Posts: 486
- Joined: Thu Jan 23, 2014 4:35 am
25 posts
• Page 3 of 3 • 1, 2, 3
Who is online
Users browsing this forum: No registered users and 2 guests