Use image as button "text"

[ZLoG83]

Hi.. I have tried to search your site and googled for a solution as of how to set an img as the button text for button.
I end up getting the HTML tag displayed instead in all cases.
I read issue 266 - but I don't see a solution in there?
That was in 2014 where it was stated that adding html as content for a button should be allowed. Is this documented somewhere? If not.. how is it done?
The reason I need this is that we are using the keyboard on a device which doesn't understand some of the unicode chars we have to use..
I tried adding this to my keyboard definition bit:
display: { 'space': '<img src="/Gfx/keyboard/space.svg" />' }

but all I get is that exact HTML dispayed as text. What has to be done in order to display the image?

• Thanks for a great piece of software which really boost out solution here 👍 :)

[Mottie]

Hi @ZLoG83!

If you look at my crappy calculator demo you'll see that I use a background image on some keys (check out the css).

/* add 1/x image to button */
.ui-keyboard-invx span {
    display: block;
    text-indent: -999em;
    background: url(images/calc-1overx.png) center center no-repeat;
}

Honestly, I don't remember why exactly I didn't allow HTML inside the key, I guess I should change it and test LOL.

Maybe you could help me test. You can modify lines 1739-1741 and remove the replace function, like this:

        data.html = '<span class="' + kbcss.keyText + '">' +
            keys.name + '</span>';

If you don't run into any issues, I'll make it permanent.

[ZLoG83]

Thanks for the great response time! :D
I tried what you wrote – If I got it right, that solution does not work.
I tried to alter the script a bit and now it works.. I am pretty sure I am not doing it “the right way” – but it works for now 

I changed it to this for now.. will look again when I get time.
Maybe you can offer a quick way to do this proper? 
Nevertheless – this does work as intended ;)

data.html = '<span class="' + kbcss.keyText + '">' +
data.value.replace(function (i) {
return i.charCodeAt(0);
}) +
'</span>';

/Jim

[Mottie]

The code in the master branch will now allow you to enter HTML into the display option.