Create cross(X) sign that is use for cancle writeted text in textbox

Create cross(X) sign that is use for cancle writeted text in textbox_

Pradeep Rawat

I have used the below code is working fine but instead of an HTML controller, I have to use the asp.net text box controller.

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

Pradeep Rawat5y ago
Hi Sachin, code is working but has to add the extra plugin . can we do the same thing using CSS ?
Sachin Singh5y ago
then copy paste this and run
"http://www.w3.org/1999/xhtml">
"server">
clearable textbox with jquery plugin
"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

"jquery.clearableTextField.js" type="text/javascript">
"text/javascript">
$(document).ready(function() {
$('#txtName').clearableTextField();
});

"text/css">
div.text_clear_button { background:url(clear_cross.png); width:11px; height:11px; margin:0; padding:0;
z-index:2; position:absolute; cursor:pointer; }
div.form {margin:10px; padding:20px; background:#eee;}



"form1" runat="server">
class="form">
for="Name">Enter Text Here:
"txtName" runat="server" />

Pradeep Rawat5y ago

HI Sachin, its not working..

Sachin Singh5y ago

do it as

step 1

"TextBox1" runat="server" placeholder="Search..."CssClass="form-control">

step 2. jquery

$(function(){
$('<%=TextBox1.ClientID%>').attr("type","search");
});

step 3. Css

Pradeep Rawat5y ago

Thanks for the reply. but I don't think so what you replied that is not my requirement. actually textbox() is showing with cross sign for cancel the text in IE, but it's not showing in chrome . so I want the same feature in chrome but using CSS or bootstrap. I hope now it's clear. (attached screenshot)

Pranam Bhat5y ago

$(".addButton").click(function () {

if (counter > 10) {

alert("Only 10 textboxes allow");

return false;

}

var newTextBoxDiv = $(document.createElement('span'))

.attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().append('Textbox' + counter +

' '" id="courseId' + counter + '" value="" >');

newTextBoxDiv.appendTo("#course");

counter++;

});