Creating a title from textbox clicked on & Numeric values to ignore numeric type

[DisaTemp]

I am hoping to achieve two things. First, I would like to be able to when I click on a textbox, show the label...maybe from an alt tag of what I clicked on. For example, if I clicked on a text box that is of units, I could show Units as a title to they keyboard.

The second thing I am trying to accomplish is if I have units, to ignore them on the numeric pad. Ex: Text Box contains "15 inches". When numeric keyboard opens have it only show numbers 15...say I change to 12, but on Accept pre-pend the "inches" back in as the value.

Thoughts?

[Mottie]

Hi @mappenzellar!

Sorry I have been responding to your emails and forgot to update the issue. Basically, the hidden and visible callbacks can be used to add/remove any labels (demo):

HTML (include a data-unit attribute with the unit of measure)

<input class="keyboard" type="text" data-unit="km" value="100 km">

Script

$(function(){
    $('.keyboard').keyboard({
        layout: 'num',
        hidden : function(e, keyboard, el) {
            var unit = $(el).attr('data-unit');
            $(el).val(function(indx, val){
                if (val.replace(/[^\d,. \-()]/g, '') === '') {
                    return '';
                } else if (/\w/.test(val)){
                    return $.trim( val.replace(/[^\d,. \-()]/g, '') ) + ' ' + unit;
                } else {
                    return val + ' ' + unit;
                }
            });
        },
        visible: function(e, keyboard, el) {
            keyboard.$preview.val(function(indx, val){
                return $.trim( val.replace(/[^\d,. \-()]/g, '') );
            });
            keyboard.$preview[0].select();
        }
    })
});

[Mottie]

Oops, I forgot to add the Label to the keyboard (demo):

This is the only change needed to the above code:

visible: function (e, keyboard, el) {
        var unit = $(el).attr('data-unit');
        keyboard.$preview.val(function (indx, val) {
                return $.trim(val.replace(/[^\d,. \-()]/g, ""));
        });
        keyboard.$keyboard.prepend('<h2>' + unit + '</h2>');
        keyboard.$preview[0].select();
}

with a little css to center the title:

.ui-keyboard h2 {
    text-align: center;
    font-weight: bold;
}

[Mottie]

I'm guessing this issue has been resolved, so I'm going to close it. If you continue to have problems, please feel free to continue this discussion.