Input with floating labels issue

1

I have 2 inputs used for conversion of weight from pounds to kilograms or vice versa. As one types in one input the other input shows the converted value. No problems.
When I use item-floating-label, the input that shows the converted value does not show it until it is clicked on instead of as I type. It seems to need focus to change the label.

My weight conversion code is this:

function weightConverter(source, valNum) {
valNum = parseFloat(valNum);
var inputPounds = document.getElementById("inputPounds");
var inputKilograms = document.getElementById("inputKilograms");
var inputGrams = document.getElementById("inputGrams");
var inputKilogramsVal = round($(inputKilograms).val(), 2);
var inputPoundsVal = round($(inputPounds).val(), 2);
var inputGramsVal = round($(inputGrams).val(), 2);
if (isNaN(inputKilograms.value)) {
    return 0;
}
if (isNaN(inputPounds.value)) {
    return 0;
}
if (source == "inputPounds") {
    inputKilograms.value = round(valNum / 2.2046226218, 2);
    inputGrams.value = round(valNum / 0.0022046, 2);
    if (!inputPoundsVal || !$.isNumeric(inputPoundsVal)) {}
}
if (source == "inputKilograms") {
    inputPounds.value = round(valNum * 2.2046226218, 2);
    inputGrams.value = round(valNum * 1e3, 2);
    //Checks for valid input
    if (!inputKilogramsVal || !$.isNumeric(inputKilogramsVal)) {}
}
if (source == "inputGrams") {
    inputPounds.value = round(valNum * 0.0022046, 2);
    inputKilograms.value = round(valNum / 1e3, 2);
    //Checks for valid input
    if (!inputGramsVal || !$.isNumeric(inputGramsVal)) {}
}

}

I figured out how to fix it in a funky way using this code:

$(document).on("keyup", "#inputPounds", function() {
       $$("#inputKilograms").trigger("focus");
    });

$(document).on("keyup", "#inputKilograms", function() {
       $$("#inputPounds").trigger("focus");
    });

But would like to find a better way to use item-floating-label with this type of interaction between the inputs.
Appreciate any ideas!

2

try by adding .item-input-with-value class to the container li.

eg:

// item-input-with-value in li should do the trick
...
<li class="item-content item-input item-input-with-value">
    <div class="item-media">
        <i class="icon demo-list-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title item-floating-label">Name</div>
        <div class="item-input-wrap">
            <input type="text" placeholder="Your name">
            <span class="input-clear-button"></span>
        </div>
    </div>
</li>
...
1 Like
3

Thanks! Much better solution than my hack!

1 Like