Click here to Skip to main content
15,861,168 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
Hi all , how can I create a Razor textbox with an x image to clear the content at the far end of the control - googled but could only find Telerik related posts or garbage

What I have tried:

googled but could only find Telerik related posts or garbage
Posted
Updated 1-Jan-23 23:58pm

1 solution

There are plenty of solutions out there. Here is a google search with many examples: javascript text input with clear button - Google Search[^]

UPDATE
I decided to try this from the search above: How to Put a Clear Button Inside an HTML Text Input Box?[^]. It required a little tweak for working with razor pages, but worked fine.

Here is what I tried:
XML
@model DataModel

@using (Html.BeginForm("Index", "Data", FormMethod.Get))
{
    <fieldset class="text__host">
        @Html.EditorFor(model => model.Name)
        <button type="reset">×</button>
    </fieldset>
}

CSS
CSS
.text__host {
    position: relative;
    width: 200px;
}

.text__host input {
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
}

.text__host input:placeholder-shown + button {
    opacity: 0;
    pointer-events: none;
}

.text__host button {
    position: absolute;
    border: 0;
    display: block;
    font-size: 12px;
    top: 1px;
    bottom: 1px;
    right: 1px;
    margin: auto;
    background: #ddd;
    padding: 0 10px;
    outline: none;
    cursor: pointer;
    transition: .1s;
}

Here is how it behaves:
1. There is no "inset" button in the TextBox when there is no text.
2. Button is shown when there is text
3. Text is cleared when the button is pressed.

Best of all, no javascript was used!

UPDATE #2
I decided to have another look at this with a second input field and noticed that hte button cleared the whole form, not just the one text input.

So here is an updated solution for a per-input reset.
XML
@model DataModel

@using (Html.BeginForm("Index", "Data", FormMethod.Get))
{
    <fieldset class="text__host">
        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { placeholder = " " }})
        <input type="button" class="button" onclick="resetInput('Name')" value="x">
    </fieldset>
        <fieldset class="text__host">
        @Html.EditorFor(model => model.Title, new { htmlAttributes = new { placeholder = " " }})
        <input type="button" class="button" onclick="resetInput('Title')" value="x">
    </fieldset>
}
<script type="text/javascript">
    function resetInput(id) {
        document.getElementById(id).value="";
    }
</script>

And the updated CSS:
CSS
.text__host input[type=text] {
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
}

    .text__host input[type=text]:placeholder-shown + .button {
        opacity: 0;
        pointer-events: none;
    }

    .text__host .button {
        position: absolute;
        border: 0;
        display: block;
        font-size: 12px;
        top: 1px;
        bottom: 1px;
        right: 1px;
        margin: auto;
        background: #ddd;
        padding: 0 10px;
        outline: none;
        cursor: pointer;
        transition: .1s;
    }

Now, only the text field button clears it's own text field. Note how the text field Id is used.
 
Share this answer
 
v4
Comments
pkfox 2-Jan-23 6:55am    
I've tried some of those suggestions Graeme but none of them work - no errors just don't work
Graeme_Grant 2-Jan-23 7:37am    
They all can't be wrong, you must not be implemented correctly. Use the browser dev tools to check why you are having issues. It is called debugging.
pkfox 2-Jan-23 8:22am    
With respect Graeme I've been programming professionaly for ~ 50 years
Graeme_Grant 2-Jan-23 8:27am    
We get a lot of people here that have no idea how to debug.
pkfox 3-Jan-23 3:55am    
I'm not one of them I live in the debugger but I am found wanting debugging Web stuff.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900