The code below is working but needs to be modified to move a cursor to the newly created textbox so that a user can continue typing when a maximum of 40 characters is reached in each textbox.Also to limit the number of characters when they reach 1000 and be able to display all typed characters in another textbox.(EventNature).
@{
ViewBag.Title = "Home Page";
}
@Html.TextArea("EventNature",new { maxlength=50, // or other value
style = "width: 200px; height: 100px;" })
function GetDynamicTextBox(value) {
var div = $("");
var textBox = $("").attr("type", "textbox").attr("name", "DynamicTextBox").attr("maxlength", "40").attr("onKeyUp", "CallScript(this)");
textBox.val(value);
div.append(textBox);
var button = $("").attr("type", "button").attr("value", "X");
button.attr("onclick", "RemoveTextBox(this)");
div.append(button);
return div;
}
function AddTextBox() {
var div = GetDynamicTextBox("");
$("#TextBoxContainer").append(div);
}
function RemoveTextBox(button) {
$(button).parent().remove();
}
$(function () {
var values = eval('@Html.Raw(ViewBag.Values)');
if (values != null) {
$("#TextBoxContainer").html("");
$(values).each(function () {
$("#TextBoxContainer").append(GetDynamicTextBox(this));
});
}
});
function CallScript(vale) {
var len = vale.value.length;
if (len == 40) {
var div = GetDynamicTextBox("");
$("#TextBoxContainer").append(div);
//move cursor to the next textbox
}
var contents = $(vale).val();
$("#EventNature").val(contents);
}
$(function () {
$('#TextBoxContainer').keypress(function () {
//return this.value.length < 6
if($(this).attr('maxlength'))
{
AddTextBox();
}
//var charsLeft = this.value.length;
//$("#charsLeft").text(charsLeft);
});
});
@if (ViewBag.Message != null)
{
$(function () {
alert("@ViewBag.Message")
});
}
Sagar Pandurang KapPosted Feb 19, 2018, 11:35 PM