MRDotNetSolutions: Backspace Email Address Remove In Asp.net using Jquery

This is Jquery File
----------------------------------------------------------------------------------------------------------------------------
(function ($) {
$.fn.tokenField = function (options) {
var settings = {
regex: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
delimiters: ', ; ',
max: 0,
nested: false,
badToken: function () { $(this).val(''); },
tooMany: function () { $(this).val(''); }
};

if (options) $.extend(settings, options);

function console_log(text) {
try {
console.log(text);
}
catch (e) {
}
}

function expandTokens(name, tokens) {
return $.map(tokens, function (v) {
return tokenHtml(name, v);
}).join('');
}

function inputHtml(name) {
return "<div class='token-input'><input type='text' size='1'/><span class='token-input-sizer'>###</span></div>";
}

function isDelimiter(ch) {
return String.fromCharCode(ch).match(RegExp('[' + settings.delimiters + ']'));
}

function isToken(text) {
return text.match(settings.regex);
}

function observeTokenField(tokenField) {

// focus on input when tokenField clicked
tokenField.click(function () {
$('.token-input', this).siblings('.selected-token').removeClass('selected-token');
$('.token-input input', this).focus();
return false;
});
// adjust size as typing occurs and blur when comma or enter pressed (retaining focus for comma)
$('.token-input input', tokenField)
.keydown(function (e) {
if (e.which == 9 && $(this).val()) {
$(this).blur();
$(this).focus();
return false;
}
else if (e.which == 8) {
$(this).siblings('.selected-token').removeClass('selected-token');
$(this).closest('.token-input').siblings('.token').last().addClass('selected-token');
$(this).closest('.token-input').siblings('.token').last().addClass('selected-token').focus();
return false;
}
return true;
})
.keypress(function (e) {
$(this).next('.token-input-sizer').html($(this).val() + '###');
if (e.which == 13 || isDelimiter(e.which)) {
$(this).blur();
if (isDelimiter(e.which))
$(this).focus();
return false;
}
return true;
})
// adjust size as typing occurs
.keyup(function () {
$(this).next('.token-input-sizer').html($(this).val() + '###');
return true;
})
// fix size when focus is returned
.focus(function () {
$(this).next('.token-input-sizer').html($(this).val() + '###');
return true;
})
// "parse" and insert token, then clear the input field
.blur(function (e) {
if (!$(this).data('blur')) {
$(this).data('blur', true);
if (settings.max == 0 || $(this).closest('.token-input').siblings('.token').length < settings.max) {
if (isToken($(this).val())) {
observeToken($(tokenHtml($(this).attr('name'), $(this).val())).insertBefore($(this).closest('.token-input')));
if (!settings.nested) {
var input = $(this).closest('.token-field').find('input:hidden');
var values = input.val().split(',');
values.splice(0, 0, $(this).val());
input.val(values.join(','));
}
$(this).val('');
} else {
if (settings.badToken) {
this.badToken = settings.badToken;
this.badToken();
}
}
} else {
if (settings.tooMany) {
this.tooMany = settings.tooMany;
this.tooMany();
}
}
$(this).removeData('blur');
}
return true;
});
observeToken($('.token', tokenField));
}

function observeToken(token) {
// select token when token clicked

token.click(function () {
$(this).focus();
return false;
})

// remove token when selected and delete/backspace is clicked
.keydown(function (e) {
if ($(this).hasClass('selected-token')) {
if (e.which == 8) {
removeToken($(this));
return false;
}
}
return true;
})
// unselect when focus is lost
.blur(function () {
$(this).removeClass('selected-token');
})
// select when focused
.focus(function () {
$(this).siblings('.selected-token').removeClass('selected-token');
$(this).addClass('selected-token');
});
// remove token when "x" clicked
$('.token-x', token).click(function () {
$(this).closest('.token').siblings('.selected-token').removeClass('selected-token');
removeToken($(this).closest('.token'));
$(this).triggerHandler("focus");
return false;
});
}
function parseTokens(text) {
text = text.replace(/^\s*(.+)\s*$/, '$1');
if (!text) return [];
return $.map(text.split(','), function (v) {
if (isToken(v)) return v;
console_log('Warning: ignoring bad token - ' + v);
return null;
});
}
function removeToken(token) {
if (!settings.nested) {
var index = token.siblings('.token').andSelf().index(token);
var input = token.closest('.token-field').find('input:hidden');
var values = input.val().split(',');
values.splice(index, 1);
input.val(values.join(','));
}
token.remove();
$(".token-input input").focus();
}

function tokenHtml(name, text) {
return "<a href='#' class='token'><span><span><span><span>"
+ text
+ (settings.nested ? "<input type='hidden' value='" + text + "' name='" + name + "'/>" : "")
+ "<span href='#' class='token-x'>x</span></span></span></span></span></a>";
}

return this.each(function () {
var id = $(this).attr('id');
var name = $(this).attr('name');
var klass = $(this).attr('class');
var style = '';
var tokens = parseTokens($(this).val());
if ($(this).height() > 0)
style = style + 'min-height: ' + $(this).height() + 'px; height: auto !important; height: ' + $(this).height() + 'px;';
if ($(this).width() > 0)
style = style + 'width: ' + $(this).width() + 'px;';
if (settings.max > 0 && tokens.length > settings.max) {
console_log('Warning: ignoring extra tokens after maximum of ' + settings.max);
tokens = tokens.slice(0, settings.max);
}
var field = $('<div></div>')
.attr({ 'class': klass, 'id': id, 'style': style })
.addClass('token-field')
.append(expandTokens(name, tokens))
.append(inputHtml(name))
.append("<div style='clear:both'></div>")
.replaceAll(this);
if (!settings.nested)
field.prepend("<input type='hidden' value='" + tokens.join(',') + "' name='" + name + "'/>")
observeTokenField(field);
});
};
})(jQuery);
----------------------------------------------------------------------------------------------------
This is Css Class File

.token-field {
font: 11px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
border: 1px solid #bdc6d7;
padding: 0 3px 3px 3px;
cursor: text;
}
.token-field .token {
border: none;
outline: 0 none;
float: left;
white-space: nowrap;
background-image: url(../images/token.gif);
background-repeat: no-repeat;
background-position: top left;
text-decoration: none;
color: #000;
margin-top: 3px;
margin-right: 3px;
cursor: default;
}
.token-field .token span {
background-image: url(../images/token.gif);
background-repeat: no-repeat;
background-position: top right;
display: block;
}
.token-field .token span span {
background-position: bottom right;
}
.token-field .token span span span {
background-position: bottom left;
}
.token-field .token span span span span {
background-image: none;
padding: 2px 3px 2px 5px;
}
.token-field .token:hover {
background-image: url(../images/highlighted-token.gif);
}
.token-field .token:hover span {
background-image: url(../images/highlighted-token.gif);
}
.token-field .selected-token {
background-image: url(../images/selected-token.gif);
color: #fff;
}
.token-field .selected-token span {
background-image: url(../images/selected-token.gif);
}
.token-field .selected-token:hover {
background-image: url(../images/selected-token.gif);
}
.token-field .selected-token:hover span {
background-image: url(../images/selected-token.gif);
}
.token-field .token span.token-x {
background-image: url(../images/transparent.gif);
padding: 0 2px 0 3px;
color: #acb9d3;
display: inline;
cursor: pointer;
font-size: 12px;
line-height: 11px;
height: 11px;
font-weight: bold;
}
.token-field .token:hover span.token-x {
background-image: url(../images/transparent.gif);
}
.token-field .token-input {
float: left;
margin-top: 3px;
}
.token-field .token-input input {
font: 11px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
border: 0 none;
outline: 0 none;
width: 100%;
}
.token-field .token-input-sizer {
font: 11px "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
left: 0;
position: relative;
top: 0;
display: block;
overflow: hidden;
height: 0;
line-height: 0;
}

-----------------------------------------------------------------------------------

.ASPX CODE

//<![CDATA[

$(document).ready(function () {

$('#input-test2').focus();

$('#input-test2').tokenField();

$('#max-test').tokenField({

max: 3, tooMany: function () { alert('you already entered 3 addresses'); $(this).val(''); }

});

$('#phone-test').tokenField({ regex: /^(?:$[0-9]{3}$ ?)?[0-9]{3}\-[0-9]{4}$/ });

$('#word-test').tokenField({ regex: /^[a-z][\w\-]+$/i });

});

//]]>

</script>

</head>

<body>

</form>

</body>

</html>

--------------------------------------------------------------------------------

Images

------------------------------------------------------------------------------------

---------------------------------------------------------

All Files Integrate into one Asp.net Application And Check

If you have any Doughts Please Contact

Madhava Reddy.P

madhup220@gmail.com.

MRDotNetSolutions

Wednesday 18 September 2013

Backspace Email Address Remove In Asp.net using Jquery

No comments:

Post a Comment