Add cross to clear text in input type search

JavaScript
1

Is there a simple way possibly using jquery and css to make an x appear in every input type search field, and when its clicked it clears the text that’s been typed.

This for example is a a text field on one page thats type is set to search.

<input class="textBox textBoxSizeStandard textSizeSmall" data-column="all" id="txtSearch" name="txtSearch" value="" data-lastsearchtime="1532010981460" type="search">

And that comes from this

@Html.TextBox("txtSearch", null, new Dictionary<string, object> { { @"class", "textBox textBoxSizeStandard textSizeSmall" }, { "data-column", "all" }, { "type", "search" } })

So what Im trying to do is ideally when they start typing a little ‘x’ appears on the right side, and when its clicked it clears all the text that the user has already typed in.

3

Its not ideally what i wanted to do, as I have to add the span to each input field, which isn’t the best option really, ideally I need the x to identify where an input field is and attach itself to it, and then when they start typing it appears for the user to click and clear the text.

        if (text) {
            $("#clearBtn1").addClass("show");
        } else {
            $("#clearBtn1").removeClass("show");
        }

@Html.TextBox("txtSearch", null, new Dictionary<string, object> { { @"class", "textBox textBoxSizeStandard textSizeSmall" }, { "data-column", "all" }, { "type", "search" }, {"onkeyup", "checkInput(this.value)" } })
    <span id="clearBtn1" class="clearBtn">X</span>

.clearBtn {
    position: absolute;
    top: 0;
    right: -15px;
    transition: right 0.2s;
    color:white;
}

.show {
    right: 5px;
    color: black;
}

But because I havent got a wrapper div around these two, the span shoots off to the right of the page, but the action of starting to type and then it appears works. Just not ideal, and a bit amateur really.

4

Yes you would need a wrapper to place it correctly but assuming all things are equal and you have a structure like this:

  <input class="textBox textBoxSizeStandard textSizeSmall" data-column="all" id="txtSearch" name="txtSearch" value="" data-lastsearchtime="1532010981460" type="search">
<span id="clearBtn1" class="clearBtn">X</span>

Then you could use auto absolute positioning and just drag the element with margins instead.

e.g.

.clearBtn {
    position: absolute;
    margin:0;
    opacity:0;
    transition: opacity 0.2s;
    color:white;
}

.show{
    margin:0 0 0 -25px;
    color:white;
    opacity:1;
}

It’s not the robust way to do it as there are things that can go wrong but depending on use it may suffice.

However how are you going to handle browsers that add the clear icon automatically to inputs that are type=“search” ?

1 Like
5

Morning Paul,

is the more robust way a more dynamic way in that jscript could be created where it detects the input fields and automatically applies it.

Ye the mobile browser issue did come to my mind, think the only way will be to turn it off when it detects it being used on a mobile device.

6

Hi there multichild,

I would suggest that you do not mess around with forms.

If you think that a “clear content” option is absolutely
imperative, then do it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>Search</title>

</head>
<body>
 
 <form action="#">
  <label for="search">Search:</label>
   <input id="search" name="search" type="search" required>
   <input type="reset" value="clear">
   <input type="submit" value="search">
 </form>

</body>
</html>

coothead

7

Ok I think i will propose to the team leader this method below, at this stage it seems the best way.

Only thing Im having trouble with is identifying which cross has been clicked to only clear that input field, Im using this but its not happening.

.clearBtn {
    position: absolute;
    margin: 0 0 0 -19px;
    opacity: 0;
    transition: opacity 0.2s;
    color: black;
    cursor: pointer;
}

.show {
    opacity: 1;
}

@Html.TextBox("txtSearch", null, new Dictionary<string, object> { { @"class", "textBox textBoxSizeStandard textSizeSmall" }, { "data-column", "all" }, { "type", "search" }, {"onkeyup", "checkInput(this.value)" } })
<span id="clearInputText" class="clearBtn">X</span>

function checkInput(text) {
        if (text) {
            $("#clearInputText").addClass("show");
        } else {
            $("#clearInputText").removeClass("show");
        }
    }

    $(".clearBtn").click(function() {
        parent.find('textBox').input.value = "";
    });

each span will connect to the input, so was thining to use parent.input, but cant get it to work

8

Hi coothead, sorry wasn’t putting down what you posted as yes that clear button would be great in some cases on our pages there multiple search boxes, and the button to the right wouldnt fit, so am going to have to go with it appearing inside the text box. And thats why I want to use ‘this’ to know which button was clicked inside what text box to only clear the text inside that textbox, not all of them.

9

Its not a parent so I assume this.prev(‘textBox’) would suffice.

It’s not a mobile issue as such because most browsers are now adding the cross and clearing text automatically when input type=search is used. You should just use type=“text” instead to avoid any confusion.

As coothead said most times these form elements are best left alone. If you simply used input type=“search” and no JS then most modern browsers (apart from IE I think) would get the automatic x and clear function.

10

Thanks Paul,

This didn’t work, but will keep trying.

    $(".clearBtn").click(function() {
        this.prev('textBox').input.value = "";
    });

The type field is set to search, but on a mobile and on the pc the cross doesn’t appear, and this is why this was picked up in testing and I’m trying to fix it.

11

Remove textBox and just use this.prev('input').value="";

Or:

this.prev('.textbox').value="";

1 Like
13

In ios the clear button was removed for some reason (Its there but hidden and does nothing if shown). On the PC the clear button is working fine in Chrome and Edge (not firefox) and is working on mac in safari and chrome.

Your example will therefore for most users be providing a double clear button and look very messy indeed. You should just use input type=“text” instead if you must have the js added so that you don’t get the double clear button.

e.g. This is a very basic example.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.