Tips and Tricks with jQuery and ASP.NET Controls
TEXT BOX in control.....that is today we will see important 5 concepts need to apply on textbox and see how it becomes easy to play with your code............
JUST APPLY THESE CONCEPTS AND GET ASTONISHED WITH YOUR THINKING............HEHEHEHEH
TRICK 1: Prevent Cut, Copy and Paste Operations in a Text Box using jQuery
Many time we come into situations where Users should be prevented from doing Cut, Copy and Paste operations in an ASP.NET TextBox, So lets see how to do it with our own jquery........
<title>Prevent Cut, Copy and Paste Operations in a TextBox</title>
<link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
/* just copy the below script and see the magic*/
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$('input[id$=tb1]').bind('cut copy paste', function(e) {
e.preventDefault(); // THIS METHOD SAVES US....
alert('You cannot ' + e.type + ' text!');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<h2>Prevent Cut, Copy and Paste Operations in a TextBox</h2>
<br /><br />
<asp:Label ID="lblEmail" runat="server"
Text="Re-Enter your Email Address"></asp:Label>
<asp:TextBox ID="tb1" runat="server"
Text="Try copying and pasting text here"
ToolTip="Try Copy/Cut/Paste in textbox"/>
<br /><br /><br />
</div>
</form>
</body>
</html>
WAIT SOME HOW LIMITATIONS..........but its OK
NOTE::Browsers Supported:
IE7, IE 8, Firefox 3, Chrome 2, Safari 4
---------------------------------------------------------------------------------------------------------
TRICK 2:Allow Only Alphanumeric Characters in a TextBox using jQuery
Users should be allowed to enter only Alphabets and Numbers in a TextBox. Non-alphanumeric
characters should be disallowed. You also want to prevent users from copying and pasting nonalphanumeric
characters into the TextBox,So Here We Go.........
<link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$('input.alpha[$id=tb1]'.bind('keyup blur', function() {
if (this.value.match(/[^a-zA-Z0-9 ]/g)) {
this.value = this.value.replace(/[^a-zA-Z0-9 ]/g, ''); // This method matches a regular expression /[^a-zA-Z0-9 ]/g that finds all characters that are
not alphabets or numbers.
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<h2>Allow Only Alphanumeric Characters in a TextBox</h2>
<asp:TextBox ID="tb1" runat="server" class="alpha"
Text="" ToolTip="Try entering Non alphanumeric char"/>
<br /><br />
Tip: Examples of some non-alphanumeric characters <br />
are ~!@~#$%^&* and so on.
</div>
</form>
</body>
</html>
========================================================================
TRICK 3:Shift Focus to the Next TextBox using the Enter Key using jQuery
Oh come on is this possible!!!!!!using enter rather than tab...say it necessary.
Of Course for more User Interface/accessibility and let user get astonished and ease ...
Just Copy the script Below
<title>Shift Focus to the Next TextBox when user presses Enter</title>
<link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function(e) {
var key = (e.keyCode ? e.keyCode : e.charCode);
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv">
<h2>Enter text and hit Enter to move to next text box</h2><br />
<asp:TextBox ID="tb1" runat="server" /><br />
<asp:TextBox ID="tb2" runat="server" /><br />
<asp:TextBox ID="tb3" runat="server" /><br />
<asp:TextBox ID="tb4" runat="server" /><br />
</div>
</form>
</body>
</html>
A LITTLE EXPLANATION:
This example uses the bind() function that binds one or more events to a handler. The key is detected
using the keyCode or charCode.
var key = (e.keyCode ? e.keyCode : e.charCode);
If the key == 13, i.e the Enter key is pressed, the default behavior (postback) is suppressed and instead
the index of the current textbox is retrieved. We then add 1 (one) to the index, to shift the focus to the
next textbox.
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" +nxtIdx + ")").focus();
}
=======================================================================
TRICK 3:Click and Highlight Text in a TextBox using jQuery
<title>Click and Highlight Text</title>
<link href="../CSS/Demos.css" rel="stylesheet" type="text/css" />
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
$('input[id$=tb1]').click(function() {
$(this).focus().select();
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv">
<h2>Click in the text box to select all the text automatically</h2>
<br /><br />
<asp:TextBox ID="tb1" runat="server" Text="Click Here to Select"/>
<br /><br />
</div>
</form>
</body>
</html>
Limitations Oh...its ok
// If you do not click and just start typing into textbox,
the effect does not show up
=====================================================================
TRICK 4:Limit Number Of Characters In a Multiline TextBox using jQuery
You want to restrict the user from entering more than 50 characters in an ASP.NET Multiline TextBox.
The ASP.NET Multiline TextBox ignores the MaxLength property.
<script type='text/javascript' src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
var limit = 50;
$('textarea[id$=tb1]').keyup(function() {
var len = $(this).val().length;
if (len > limit) {
this.value = this.value.substring(0, limit);
}
$('#charLeft').text(limit - len + " characters left");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv">
<h2>Type into this textbox which accepts 50 characters overall</h2>
<asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"/><br />
<span id="charLeft"></span>
</div>
</form>
</body>
</html>
OH I see YOU became happy with the above code......................................
but look at the confusion created and giving only ambiguity to the user..what to do or not..CONFUSED!!!!!!!!!!!!!!!
Although the solution given above restricts the user from entering more than 50 characters, this behavior can be confusing for users who may not realize that they have reached the TextBox limit.
Instead of disallowing extra characters, a slick way of handling this requirement would be to visually indicate to the user when the textbox limit has been exceeded. Then before submitting the form, give the user a chance to remove the extra text. The code shown below changes the background color of the textbox to red when the textbox limit is exceeded. The user is also prevented from submitting the form.
KKKKKK DONT WORRY LETS SEE THE EXTENDED APPROACH................................
}
else {
$(this).removeClass('exceeded');
$('#spn').text(limit - len + " characters left");
}
});
$('input[id$=btnSubmit]').click(function(e) {
var len = $tb.val().length;
if (len > limit) {
e.preventDefault();
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv">
<h2>Type into this textbox which accepts 50 characters overall</h2>
<asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"/><br />
(This textbox accepts only 50 characters) <br />
<span id="spn"></span> <br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit"/>
<span id="error"></span>
<br /><br />
Tip: Clicking on the Submit button when number of characters are
less than 50, results in a postback to same page. If you exceed 50
characters, the exceeded characters are printed below the textbox
and a postback is prevented.
</div>
</form>
</body>
EXPLANATION:
When the number of characters exceeds the textbox limit, we add the exceeded class to the textbox,
which turns the textbox background to red, indicating the user that the limit has been exceeded.
if (len > limit) {
$(this).addClass('exceeded');
The exceeded class declared in Demos.css looks like this
.exceeded
{
background-color:red;
}
=========================================================================
TRICK 5:AutoScroll a Multiline TextBox using jQuery
You want to autoscroll a Multiline TextBox both upwards and downwards.So lets see what can we do............
<script type='text/javascript'
src='../Scripts/jquery-1.3.2.min.js'>
</script>
<script type="text/javascript">
$(function() {
var $tb = $('textarea[id$=tb1]');
$('input[id$=btnScroll]').toggle(
function(e) {
e.preventDefault();
scrollArea($tb, $tb[0].scrollHeight);
},
function(e) {
e.preventDefault();
scrollArea($tb, 0);
});
});
function scrollArea(ctrl, ht) {
ctrl.animate({ scrollTop: ht }, 1000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="smallDiv">
<h2>Scroll the box contents by clicking on the Button</h2>
<br /><br />
<asp:TextBox ID="tb1" runat="server" TextMode="MultiLine"
Text="HELLO THIS IS THE SAMPLE TEXT BEEN WRITTEN IN THE
MULTIBOX TEXTBOX OF ASP.NET TO ILLUSTRATE THE SCROLLING EFFECT
AND REST IS BLAH BLAH BLAH BLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAH
BLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAH
BLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAHBLAH"
Rows="5"/>
<br />
<asp:Button ID="btnScroll" runat="server" Text="Scroll"/>
<br /><br />
</div>
</form>
</body>
Explanation:
When the user clicks on the button (btnScroll), we toggle the click behavior. On the first click, we cancel
the postback by using e.preventDefault() and then call a function called scrollArea() passing in the
textarea and the scrollHeight. The code $tb[0].scrollHeight is for scrolling downwards
e.preventDefault();
scrollArea($tb, $tb[0].scrollHeight);
When the user clicks the button (btnScroll) again, the postback is cancelled and the scrollHeight is set to
0 (zero). This is done for scrolling upwards.
e.preventDefault();
scrollArea($tb, 0);
OK FRIENDS ENJOYS
WAIT....................................................................................................................................
.............................................................................................................................................
Useful Links:
No comments :
Post a Comment