CODEWITHSUNDEEP
javascriptc#jquery
Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

Remove certain text from text box on click

I have a TextBoxcontrol in my web form, where in I display Height & Width of certain product.

Now I display this as follows :

enter image description here

As you can see, I append a " to show inches, in the string in the following way : 

txtH.Text = arrHW[i].ToString() + "\"";

Now, this causes problem while editing! As the user can never always be sure of correctly editing the field by editing the number only and not the " symbol.

I need someway either through JavaScript or C#, that removes the symbol " while the user clicks on the textbox and removes as the focus is changed.

I tried this method, but it doesn't seem to work!

protected void txtH_TextChanged(object sender, EventArgs e)
        {
            string height = txtH.Text;
            char[] splitArr = { '"' };
            string[] editH = height.Split(splitArr);

            for (int i = 0; i < editH.Length; i++)
            {
                if (editH[i].ToString().Equals("\""))
                {
                    editH[i].Remove(i);
                }
            }
        }

This is the designer code for the textboxes : 

<asp:PlaceHolder ID="plcHW" runat="server">
       <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-arrows-v"></i>&nbsp;Height</span>
              <asp:TextBox ID="txtH" runat="server" Width="60px" CssClass="form-control" OnTextChanged="txtH_TextChanged" />

              <span class="input-group-addon"><i class="fa fa-arrows-h"></i>&nbsp;Width</span>
              <asp:TextBox ID="txtW" runat="server" Width="60px" CssClass="form-control" />
       </div>
 </asp:PlaceHolder>

Upvotes: 2

Views: 2566

Answers (4)

Vibhesh Kaul
Vibhesh Kaul

Reputation: 2613

You can clear the text box as soon as the focus is on it then add" after the user adds the value to it! This is one way of doing it!

var prev="";
$('#HEIGHT').focus(function() {
prev=$(this).val();
$(this).val(prev.replace("\"", ""));

}).blur(function() {

 if($(this).val()==""){
 $(this).val(prev)
}
else{
$(this).val($(this).val()+"\"");
}
});

Upvotes: 1

Rajan Goswami
Rajan Goswami

Reputation: 769

I have tried solving your issue with this Fiddle: http://jsfiddle.net/akd7r31a/1/

$(document).ready(function(){

    $('#username').focus(function(){
        var txtValue = $(this).val();
        var charTest = txtValue.substr(txtValue.length - 1);
        if(charTest == '"'){
            var showString = txtValue.slice(0, -1);
            $(this).val(showString);
        }
    });

    $('#username').focusout(function(){
        var txtValue = $(this).val();
        var charTest = txtValue.substr(txtValue.length - 1);
        if(charTest != '"'){
            var newVal = $(this).val() + '"';
            $(this).val(newVal);
        }
    });
});

Upvotes: 1

Lali
Lali

Reputation: 2866

You can do it as 

$(document).ready(function(){    
    $("TextBoxId").focus(function(){
        var tval = $(this).val();
        $(this).val(tval.replace(/\"/g, ""));
    });

    $("TextBoxId").focusout(function(){
        var tval = $(this).val();
        $(this).val(tval.replace(/\"/g, "")+ '\"');
    });
});

Upvotes: 1

Daniel Lizik
Daniel Lizik

Reputation: 3144

Without any jquery:

(function($el) {
    "use strict";    

    $el.addEventListener("focus", adjust, true);
    $el.addEventListener("blur", adjust, true);

    function adjust($e) {
        var e = $e.type;
        if (e === "focus") $el.value = $el.value.replace(/\"/g, ""); 
        if (e === "blur")  $el.value = $el.value + '"';     
    }    

})(document.getElementById("height"));

http://jsfiddle.net/dlizik/5cb7g8te/

Upvotes: 1

Related Questions