This is a simple but effective way of making your input box's look good and have the place holder appear as a label, when the input box has data within

I have created a simple example, using .NetCore Razor pages.

The input box should look like below
When the input box is empty

When data inputted

Code Example
Full example of code can be found within the below GIT repo
https://github.com/chriscooper01/InputBoxLabel

The code

Below is the code broken down into its raw elements.

The Input box.

As you can see you have a simple label and Text box. The label is set the "InputEnterLabel" css class as default.

The input box is set "InputBox" css class as default with the onkeyUp JS function call inputBoxPlaceHolder, which will pass the controller into the function. There is as well a data attribute added for the place holder to hold the label content.

<div class="row col-sm-12 col-md-12 col-lg-12 InputBoxRow ">
     @Html.LabelFor(Model => Model.INPUTRecord, new { @class = "InputEnterLabel" })
     @Html.TextBoxFor(Model => Model.INPUTRecord, new { @class = "InputBox", @placeholder = "Place holder inside input",  onkeyup = "inputBoxPlaceHolder(this)", data_placholder = "Outside PC:" })

</div>

Java script side

Now here I have two main call, one to be called on the document load, so it knows to set the label in the correct location and the call that is done on the Key up of the input box.

function checkInputBoxPlacholderNeeded() 
{
    console.log("Looking for input box");
    var inputs = $(".InputBox");
    console.log("Input box's found: " + inputs.length);
    for (var i = 0; i < inputs.length; i++) {
        inputBoxPlaceHolder(inputs[i]);
    }

}

function inputBoxPlaceHolder(inputBox) 
{
    var labelText = "";
    var a = $(inputBox).val().trim().length;

    if ($(inputBox).hasClass("InputEntered") === false && a > 0) {
        $(inputBox).addClass("InputEntered");

        labelText = $('label[for=' + inputBox.id + ']');
        labelText.addClass("InputEnterLabelViewable");
        $(labelText).text($(inputBox).data("placholder"));
    } else if (a === 0) {
        $(inputBox).removeClass("InputEntered");
        labelText = $('label[for=' + inputBox.id + ']');
        labelText.removeClass("InputEnterLabelViewable");
    }
}

If you want the input box's to set dynamically on page load add the below script to the page JS file. This will call the checkInputBoxPlacholderNeeded function to look for the input box's and check if they have data or not.

$(document).ready(function () {//same as: $(function() { 

    checkInputBoxPlacholderNeeded();
    //$('#MergeStart').hide();
});

CSS

Below is simple CSS which, make my Input box's and label look like they do.

.InputBoxRow {
    padding-top: 5px;
    padding-bottom: 5px;
    max-height: 55px;
    left:0px;
}


.InputEntered {
    padding-left: 30px !important;
    max-width: calc(100% - 100px) !important;
    min-width: calc(100% - 100px) !important;
    margin-left: 100px !important;
}
.InputBox {
    min-height: 40px;
    max-height: 40px;
    line-height: 40px;
    padding-top: 12px;
    padding-bottom: 12px;
    width: 100%;
    background-color: #e6e1e1;
    border: none;
    font-weight: 600;
    color: black;
    padding-left: 10px;
    padding-right: 10px;
}

.InputEnterLabel {
    position: absolute;
    visibility: hidden;
    z-index: 0;
    min-height: 40px;
    max-height: 40px;
    line-height: 40px;
    color: #aea9a9;
    font-weight: 500;
    padding-left: 10px;
    font-size: x-small;
}

.InputEnterLabelViewable {
    visibility: visible;
    background-color: #e6e1e1;
    max-width: 100px !important;
    min-width: 100px !important;
}

Blog

Full input box with Dynamic Placeholder appear on the side

Chris Cooper

The code

The Input box.

Java script side

CSS

Join Our Newsletter. No Spam, Only the good stuff.

Related