Textchanged event in mvc for a Textbox - asp.net-mvc-4

Question

I am a beginer in mvc.I am working on an application where i need to change the value of a textbox after i enter a value in it and press TAB.For example when i enter 1 in textbox and press tab it should display +1 ie i need to concatinate a + sign to the text i enter.SO to do this i am trying to raise a textchanged event for the textbox.How can i do it.When i googled it i found that it can be done using javascript.But i dont know how to do that,pls give me some suggessions.
Code:
#Html.TextBoxFor(m => m.text)--textbox

Answer 1

You could use jQuery and subscribe to the blur event which will be triggered when the input field looses focus:
$(function() {
$('#id_of_your_textbox').blur(function() {
var value = $(this).val();
var newValue = value + '1';
$(this).val(newValue);
});
});
If you don't want to use a javascript framework such as jQuery you could achieve the same with plain javascript:
window.onload = function() {
document.getElementById('id_of_your_textbox').onblur = function() {
var value = this.value;
var newValue = value + '1';
this.value = newValue;
};
};
Note: this will add the string value 1 to the existing text. If you wanted to perform an integer addition you need to parse the current value first. You could use the parseInt or parseFloat methods (depending on the data type) for that:
var value = parseInt($(this).val());
if (!isNaN(value)) {
var newValue = value + 1;
$(this).val(newValue);
} else {
alert('You have entered an invalid integer value');
}
And here's how to assign a deterministic id to your text field that you could use in your javascript selectors:
#Html.TextBoxFor(m => m.text, new { id = "id_of_your_textbox" })