JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Buttons › Checkbox on focus doesn’t fire
Tagged: checkbox onfocus
- This topic has 18 replies, 4 voices, and was last updated 1 year, 10 months ago by
svetoslav_borislavov.
-
AuthorPosts
-
September 16, 2022 at 2:41 pm #103688
tbettinazzi@axioma.it
ParticipantI’m using smart checkbox in this way
<smart-check-box name=”ce1403907841″ id=”ce1403907841″ onchange=”assegnaCheck(this, ‘e1403907841’); eseguiRefresh(this)” onfocus=”on_focus(this)”></smart-check-box>
but the onfocus event doesn’t fire.Is it a bug ?
Any suggestion ?
Tks
September 19, 2022 at 1:07 pm #103705svetoslav_borislavov
ParticipantHi,
You can set focus event this way: https://codepen.io/svetoslavb04/pen/KKRmGmM?editors=1111
If you need further help, do not hesitate to contact us!
Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/September 21, 2022 at 7:54 am #103718tbettinazzi@axioma.it
Participant<span class="Y2IQFc" lang="en">Effectively it seems to fire before the onchange event and then the onfocus doesn't fire. Tks</span>
September 21, 2022 at 9:25 am #103719admin
KeymasterHi,
Yes, and that is exactly how it should work. Focus is raised when you click, after that Change is raised as it changes the state from true->false or false->true. Then when it is on focus, only Change event is raised as only the state is changed, the focus is not. When you click outside and focus a different element and after that click again on the checkbox, the focus and changed will be raised.
Best Regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/September 21, 2022 at 10:06 am #103720tbettinazzi@axioma.it
ParticipantSorry but I didn’t understand (may be some comma are missing).
When a checkbok has not the focus and I click on it it will fire before onfocus and then onchange or viceversa ?
Tks
Tullio
September 21, 2022 at 10:59 am #103721tbettinazzi@axioma.it
ParticipantI investigate deeper and the problem seems to be a little more complex.
In the onfocus I activate the following code in order to have the sequence number of the element :
var elementName = getElementName(element);
for (var i = 0; i < myPage.length; i++) {
if (getElementName(myPage.elements[i]) == elementName) {
id = i;
}
}I found that when the checkbox goes from unchecked to checked the code fails and doesn’t find the sequence number, when it goes from checked to unchecked it works and finds the correct sequence number.
Could You explain me why ?
I also listed all elements and, effectively, when the checkbox is non checked it doesn’t esist in list of the element of the pages.
Tks
Tks
-
This reply was modified 1 year, 11 months ago by
tbettinazzi@axioma.it.
September 21, 2022 at 12:04 pm #103723admin
KeymasterHi Tullio,
onfocus happens before onchange. When an element is already on focus, it will raise only onchange when the value is changed. We did not find any issue on our side.
In your post, you’re writing about sequence. The tab order for the focus depends on the tabindex property of the HTML Elements – any html elements, not just smart html elements. If you add the smart-check-box tag to your DOM, it will be in the DOM and after the DOM is loaded(use onload event to ensure it), then you will be able to use querySelector, getElementById, etc.Best Regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/September 23, 2022 at 7:39 am #103733tbettinazzi@axioma.it
ParticipantUnfortunately this doesn’t solve my problem.
I need the sequence in order to set the focus on the next item.
But my question is : why, when a checkbox is not checked, it isn’t in the list of elements in the page ?
Tks
September 23, 2022 at 1:06 pm #103739george_kostov0
ParticipantHi,
Please provide us with a quick demo of the bug, so we can find the error!
Thanks in advance!Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/September 23, 2022 at 2:34 pm #103742tbettinazzi@axioma.it
ParticipantHere the test case.
On the first checkbox if You change from checked to unchecked You’ll se an alert “C1 0” (correct) but if You goes from unchecked to checked You’ll get “C1 -1″ (wrong, it should be the same as before).
Tks
<!DOCTYPE html>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Checkbox Overview Demo</title>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0″ />
<link rel=”stylesheet” type=”text/css” href=”../../../source/styles/smart.default.css” />
<link rel=”stylesheet” type=”text/css” href=”../../styles/demos.css” />
<link rel=”stylesheet” type=”text/css” href=”styles.css” /></head>
<body class=”viewport”>
<script>
function applica(element) {
var myPage = document.forms[0];
var id = -1;
var elementName = element.name;
for (var i = 0; i < myPage.length; i++) {
if (myPage.elements[i].name == elementName) {
id = i;
}
}
alert(elementName + ” ” +id);
}
</script>
<section id=”check-box”>
<div>
<p>Checkboxes allow the user to select multiple options from a set.</p><br/>
<p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br/>
<p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br/>
</div>
<br/>
<form>
<div>
<div class=”check-box-container-light”>
<smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
<smart-check-box name=”C2″></smart-check-box>
</div>
</div>
</form>
</section>
<br/>
<!– scripts –>
<script src=”../../../source/modules/smart.checkbox.js”></script>
<script src=”index.js”></script></body>
</html>October 3, 2022 at 10:18 am #103807tbettinazzi@axioma.it
ParticipantNo help ?
Tks
October 6, 2022 at 11:50 am #103813svetoslav_borislavov
ParticipantHi,
I have worked on your example, look here: https://codepen.io/dkeamcaksoem/pen/RwyYWJW
The element is there it is not disappearing. The only thing that I have changed is that I am getting the name this way:
myPage.elements[i].ownerElement.name not myPage.elements[i].name.Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/October 7, 2022 at 3:29 pm #103815tbettinazzi@axioma.it
ParticipantTks for your help but this doesn’t solve the problem.
If You add aonther field to the fom (as in the example) it goes into a js error (e.g. adding an input hidden field).
<section id=”check-box”>
<div>
<p>Checkboxes allow the user to select multiple options from a set.</p><br />
<p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br />
<p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br />
</div>
<br />
<form>
<div>
<div class=”check-box-container-light”>
<input name=”C0″ type=”hidden”/>
<smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
<smart-check-box name=”C2″></smart-check-box>
</div>
</div>
</form>
</section>-
This reply was modified 1 year, 10 months ago by
tbettinazzi@axioma.it.
October 10, 2022 at 12:07 pm #103817svetoslav_borislavov
ParticipantHi,
You should search the checkbox in the ‘check-box-container-light’ element.
Loop through the children and search for the checkbox as shown here: https://codepen.io/dkeamcaksoem/pen/QWrJvgzBest Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/-
This reply was modified 1 year, 10 months ago by
svetoslav_borislavov.
October 12, 2022 at 9:58 am #103828tbettinazzi@axioma.it
ParticipantTks for you help but this approach doesn’t work in a more complex environment.
It’s enough to add a div in whithin and it fails (see below) and in my real environment I’ve many divs or other intermediate objects.
Why we don’t see it in page elements if not checked ?
Tks
<section id=”check-box”>
<div>
<p>Checkboxes allow the user to select multiple options from a set.</p><br />
<p>If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.</p><br />
<p>If you have a single option, avoid using a checkbox and use an on/off switch instead.</p><br />
</div>
<br />
<form>
<div>
<div class=”check-box-container-light”>
<input name=”C0″ type=”hidden”/>
<div>
<smart-check-box checked onChange=”applica(this)” name=”C1″></smart-check-box>
<smart-check-box name=”C2″></smart-check-box>
</div>
</div>
</div>
</form>
</section>-
This reply was modified 1 year, 10 months ago by
tbettinazzi@axioma.it.
-
This reply was modified 1 year, 10 months ago by
tbettinazzi@axioma.it.
-
This reply was modified 1 year, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.