Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field:

<input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email protected]</a>">

I need to incorporate a delete function that includes an "x" icon displayed at the end of the input.

javascriptjqueryhtmlcss

Answer №1

To enhance the user experience, try utilizing the type attribute as search:

<input type="search" class="signup-input text-value" name="" placeholder="for example: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25405d4448554940655057490b464a48">[email protected]</a>">

By setting type="search", an x button will appear within the input field to clear its contents with a click.

Check out this demo on http://jsfiddle.net/rnfp59jg/

Most modern browsers support the type="search" feature, as detailed on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input:

Feature     Chrome  Firefox (Gecko) IE  Opera   Safari
type=search 5.0     4.0 (2.0)       10  11.01   (Yes)

Answer №2

If you want a seamless experience across different browsers, consider the following method:

Wrap your input in a div container and use absolute positioning to place the 'X' icon exactly where you want it on the input field.

This code snippet not only includes a smooth fading transition but also the necessary event handler:

$(document).ready(function() {

      $('.ex').click(function() {
        $('.signup-input').val("");
      });
    });
.wrap input,
.wrap .ex {
  display: inline-block;
}
.wrap {
  position: relative;
  width: 50%;
  height: 30px;
}
.ex {
  position: absolute;
  right: 0;
  top: 10%;
  height: 30px;
  width: 30px;
  opacity: 0;
  font-size: 30px;
  line-height: 30px;
  transition: all 0.8s;
  border: 1px solid transparent;
  text-align: center;
}
input {
  width: 100%;
  height: 100%;
}
.wrap input:focus ~ .ex {
  opacity: 1;
}
.ex:hover {
  border-radius: 50%;
  background: tomato;
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <input type="text" id="this" class="signup-input text-value" name="" placeholder="e.g. [email protected]">
  <div class="ex">&times;</div>
</div>

Answer №3

To implement the functionality shown in the code below, you can simply integrate it into your website. The code is compatible with all web browsers.

Embed the following HTML:

<span class="surround">
    <span class="tagsh"> Name </span>
</span>

Integrate JQuery as follows:

var clearIcon ='<span id="icon_clear">X</span>';
$('<input type="input" class="textbox"/>'+clearIcon).appendTo('.surround')
    .keyup(
       function(e){
           var $dad = $($(this).parent());
           $(this).val().length>0?
               $('#icon_clear').fadeIn(300).click(function() {
                   $('.textbox').val('');}):
                   $('#icon_clear').fadeOut(300);
           if (e.keyCode in {13:"enter",32:"space"}){              
               var text = $(this).val(); 
               $('#icon_clear').remove();
               $dad.append($('<span class="tag"><span class="plus"></span><span class="minus"></span> '+text+'</span>'));
               $dad.append($(this).val("").hide().show("slow").focus());
               $dad.append(clearIcon);
           } ;});

Apply the CSS styles listed below:

.textbox{
    width:70px;
    border:1px dotted #ccc;
    margin: 0 5px;
    padding-right:18px;
}

span#icon_clear{   
    display:none;
    cursor:pointer;
    color:#38468F;
    position:relative;
    right:21px;

}
span#icon_clear:hover{
    color:#ccc;
}

For a demo and further customization options, visit the JSFiddle link provided: http://jsfiddle.net/ketan156/7PnKS/98/

Answer №4

<div class="search-wrp"><input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9ccd1c8c4d9c5cce9dcdbc587cac6c4">[email protected]</a>"><span class="close">x</span></div>

input{
    border: 0px;
    width: 100px;
}
.search-wrp{
    border: 1px solid #ccc;
    width: 120px;
}
.search-wrp span{
     color: blue;
     display: inline-block;
     margin-left: 5px;
     paddin: 3px; /* Note: There seems to be a typo here ('paddin' instead of 'padding') */
     cursor: pointer;

}

JS Code

$(function(){
    $(".search-wrp .close").on("click",function(){
        $(".search-wrp input").val("");
    });

});

http://jsfiddle.net/bbw99eq8/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger an event, pause, and subsequently trigger another one within Vue

I have successfully emitted the following events to the parent component: this.$emit('sendToParent1', true); this.$emit('sendToParent2'); this.$emit('sendToParent3'); this.$emit('sendToParent4', true); this.$emit(&ap ...

javascriptvue.jsemitprop

What factors contribute to a one-hour discrepancy between two time stamps, deviating from the anticipated value?

Let's consider the dates '2022-04-01' and '2022-05-15'. When I calculated their deviation using Chrome devtools, here are the results: https://i.stack.imgur.com/tSZvk.png The calculated result is 3801600000. However, when my frie ...

javascriptdatetimetimetimestamptimezone

Conceal the ancestor if the descendant four generations down is vacant

Hey there, I've been working with Beaver Builder on a website and integrating ACF to include a video module. However, not every page will necessarily have a video, and when it's not added, the div.fl-row still appears. I tried using a function to ...

phpjquerywordpress

Spacing before input text is found to be unnecessary and can be removed

Hello there, I've encountered a slight issue with a text input field that has border radius. The first character typed seems to protrude slightly outside the input field due to the border radius. Is there a way to add some extra whitespace before the ...

htmlcss

Achieving the desired results through the utilization of CSS3 rather than relying on images

I am currently exploring the use of CSS3 to create a menu instead of relying on images over at . You can view my progress and code (including images and styles) here: Although I attempted to use CSS3 for the border shadow and matching the background of ...

htmlcss

In Laravel, I am facing an issue where I am unable to trigger any event on the data that I have appended using

Currently using Laravel 5.6 Implemented the following event to append div.categoryAjaxId: The code works as expected and successfully appends my content. //--------- get product ------------------------- jQuery('.orderProduct').click(function( ...

jqueryajaxlaravel-5

Resetting the form and validation in AngularJS post form submission

I need help resetting a form and all validation messages after submission. Check out my code on plunker: http://plnkr.co/edit/992RP8gemIjgc3KxzLvQ?p=preview Here is the code snippet: Controller: app.controller('MainCtrl', function($scope) { ...

javascriptangularjsvalidation

HTML5 Slideshow with Smooth Image Transitions

So, I have created an HTML5 image slideshow and it's working perfectly on my localhost. However, I am puzzled as to why there is no transition effect within the slideshow. I was expecting something like fading out the first picture and then having the ...

javascripthtmlcssslideshowtransition

What is the best way to make a CSS element move with Javascript?

Currently working on a JavaScript game where I am in need of a CSS object to replace the original JavaScript object. Specifically, I want my "sword" CSS object to move along with my player object when it is Unsheathead. All the examples I find only show wh ...

javascripthtmlcss

Issue with jquery selector function when handling ajax response containing HTML data

Within my jquery code, I have implemented an ajax get function to retrieve the html code of a specific page. My objective is to extract a particular element from this html content. However, when attempting to do so, jquery throws the following error: SCRI ...

jqueryajaxstringparsing

Revamping jQuery code to connect table rows with dynamic links following the integration of AJAX search functionality in the table

My HTML table was originally populated with server information and had a jQuery function that allowed users to click on the table rows to follow dynamic links based on the corresponding id in each row. I then added a script for a search/filter function us ...

phpjqueryhtmlajax

There seems to be an issue with the navigation bar

I am currently facing an issue with the navigation bar on my website. It appears to be working fine when viewed at full width, but when I shrink the page, the menu button shows up as expected but does not function properly. I have been trying to identify ...

htmlbootstrap-5

Increase the drop area's height when hovering in jQuery UI Drag and Drop functionality

I've been attempting to increase the height of a drop area using jQuery UI's drag and drop feature, but it's not working as I anticipated. Take a look at this fiddle for reference: http://jsfiddle.net/pn226rj9/ Specifically, I am trying to ...

jqueryjquery-uijquery-ui-draggablejquery-ui-droppable

What is the typical response time for a request using javascript axios?

In my current application, I am fetching data from an API and everything is functioning correctly. However, I am interested in determining the duration of each request in milliseconds. To achieve this, I implemented interceptors using axios. The challenge ...

javascriptvue.jsaxiosrequest

Ways to create a vertical bottom-up tree view using d3.js

I am trying to create a reverse tree view, starting from the bottom and moving up. What modifications do I need to make? Here is the link to my JS Fiddle: ...

javascriptjquerycssd3.jssvg

How can we set up Node JS to automatically trigger events when a specific future date and time from the database is reached?

I have taken on the challenge of providing users with a feature where they can select a date and time in the near future while placing an order. This chosen time and date will be saved in the database. How can I set up a function to automatically execute ...

javascriptnode.jsreactjsmongodbtriggers

The JSON.stringify function is returning inaccurate index structures

I am attempting to use the JSON.stringify() method on my object (refer to the screenshot). However, the result I am getting is not what I expected - the indexes of the objects are in the wrong order. You can view the complete stringified JSON here: As y ...

javascriptjson

AngularJS: Customize form elements based on model type

I need to work with an Angular model that contains ConfigValues. This is essentially a Dictionary object passed from C# which looks something like this: { Name: "Config Name", Value "True", Type: 0 // boolean } Some of these values are boolean, ...

javascriptangularjs

Failed commitments in Protractor/WebDriverJS

WebdriverIO and Protractor are built on the concept of promises: Both WebdriverIO (and as a result, Protractor) APIs operate asynchronously. All functions return promises. WebdriverIO maintains a queue of pending promises known as the control flow to ...

javascriptseleniumtestingpromiseprotractor

How can JS be used to create content without refreshing the page?

On my website, I have a staff directory where each individual can be selected by clicking on their profile. When a staff member is clicked, a jQuery mobile popup opens and loads dynamic content using AJAX. Within this popup, users have the option to delete ...

jqueryajaxjquery-mobile