appending a 'class' to each key

This issue has been tracked since 2022-07-18.

Is your feature request related to a problem? Please describe.
similar to how wordle works, I would like to highlight letters that a user has previously submitted. But upon investigation it seems Simple-Keyboard does not append a unique class to each key, so highlighting keys individually is not possible.

Describe the solution you'd like
each key is tagged with a class as follows:
{base}_{key name}

so for example the 'e' key would be:

key_e

or the 'T' key would be

key_t

This makes it easy to programatically access and manipulate each key.

Describe alternatives you've considered
Looking into finding the key using the attribute and then appending a class to the key programatically. But this is a bit long winded. we could instead just have a class for each key as standard.

Additional context
N/A

mabandla2003 wrote this answer on 2022-07-18

UPDATE: After some time trying the workaround I suggested (https://stackoverflow.com/questions/4480515/jquery-addclass-to-element-based-on-attribute-value) it seems it's just not possible to add a class to a key in order to then style it individually.

Looking forwad to your advice on this and feedback on my feature request.

hodgef wrote this answer on 2022-07-20

Hey @mabandla2003,

There have been a few wordle implementations, you can browse for them here:
https://github.com/hodgef/simple-keyboard/network/dependents?package_id=UGFja2FnZS01MDczOTEwNg%3D%3D

Also, every key in simple-keyboard has both an unique id (data-skbtnuid) and a name (data-skbtn). You can do a CSS select using these attributes. I don't think it's worth adding a class that would provide what you already can get using the attributes.

image

If you do need to add a class, you can use onRender then recurseButtons to add a class to each button element.

Another option: the buttonTheme functions which serve to add classes to individual buttons:
https://hodgef.com/simple-keyboard/documentation/methods/addbuttontheme/
https://hodgef.com/simple-keyboard/documentation/methods/removebuttontheme/
https://hodgef.com/simple-keyboard/documentation/options/buttontheme/

Regards,
Francisco Hodge

More Details About Repo
Owner Name hodgef
Repo Name simple-keyboard
Full Name hodgef/simple-keyboard
Language JavaScript
Created Date 2018-03-02
Updated Date 2022-12-06
Star Count 1738
Watcher Count 20
Fork Count 130
Issue Count 0

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date