Удалить текст из текстового поля при нажатии

Question

У меня есть TextBox элемент управления в моей веб-форме, где в я отображается Высота & Ширина определенного продукта.

Теперь я показываю это следующим образом:

Как вы можете видеть, я прилагаю " показать дюйма, в строке следующим образом:

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

Теперь, это вызывает проблемы при редактировании! Поскольку пользователь никогда не может быть уверен в правильном редактировании поля, редактируя только номер, а не символ ".

Мне нужно что-то или через JavaScript или C#, который удаляет символ ", пока пользователь нажимает на текстовое поле и удаляет его при изменении фокуса.

Я пробовал этот метод, но он не работает!

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); 
       } 
      } 
     } 

Это код дизайнер для текстовых полей:

<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> 

Answer 1

Вы можете очистить текстовое поле, как только фокус на нем затем добавить " после того, как пользователь добавляет значение к нему! Это один из способов сделать это!

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()+"\""); 
} 
}); 

Answer 2

Вы можете сделать это, как

$(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, "")+ '\"'); 
    }); 
}); 

Answer 3

Без 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/

Answer 4

Я попытался решить проблему с этим 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); 
     } 
    }); 
});