Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

JavaScript make some text non editable - know position of cursor in textbox and disable delete and BackSpace options in keyboard

Nov 4, 2010
Introduction

Here I will explain how to make some text non editable in textbox and how to know position of cursor in textbox and how to disable delete and BackSpace buttons in keyboard using JavaScript.

Description

Here I have one country dropdown and one textbox based on the selection of country from dropdown I need to display country codes in textbox. After that user enter mobile number here my requirement is user can edit his mobile number but I don’t want to give chance to edit country code in textbox for that requirement I have written below code

Write following code in your aspx page and check 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Phone Numbers</title>
<script type="text/javascript">
//This function is used to check location of the curosr in textbox
function GetCursorLocation(CurrentTextBox) {
var CurrentSelection, FullRange, LocationIndex = -1;
if (typeof CurrentTextBox.selectionStart == "number") {
LocationIndex = CurrentTextBox.selectionStart;
}
else if (document.selection && CurrentTextBox.createTextRange) {
CurrentSelection = document.selection;
if (CurrentSelection) {
FullRange = CurrentTextBox.createTextRange();
LocationIndex = FullRange.text.length;
}
}
return LocationIndex;
}
//This function is used to check whether user select any country or not and it doesn't allow user to edit the country code and it disable delete and backspacekeys in keyboard
function doCheck(CurrentTextBox) {
var keycode;
var len;
DisplayCursorLocation(CurrentTextBox);
keycode = (event.which) ? event.which : event.keyCode;
len = document.getElementById("cmbCountry").value.length;
if (GetCursorLocation(CurrentTextBox) <= len - 1) {
event.returnValue = false;
}
else if ((GetCursorLocation(CurrentTextBox) == len) && (keycode == 8)) {
event.returnValue = false;
}
else {
event.returnValue = true;
}
}
//This function is used to know the postion of Cursor and add red color to text
function DisplayCursorLocation(CurrentTextBox) {
document.getElementById('Result').innerText = 'Location of cursor is ' + GetCursorLocation(CurrentTextBox);
document.getElementById('Result').style.fontWeight = "Bold";
document.getElementById('Result').style.color = "Red";
}
//This function is used to check dropdown selected item value based on that enable or disable textbox
function OnCountryChange(x) {
var ddl = document.getElementById('cmbCountry');
var txt = document.getElementById('txtCode');
if (ddl.value == "Select Country") {
txt.value = '';
txt.readOnly = true;
}
else {
txt.value = x;
txt.readOnly = false;
}
}
</script>
</head>                                                                  
<body>
<form id="form1" name="form1" action="textcursor.asp">
<table align="center">
<tr>
<td>
Country:
</td>
<td>
<select name="cmbCountry" id="cmbCountry" onChange=" return OnCountryChange(this.value)">
<option value="Select Country">Select Country</option>
<option value="91-">India</option>
<option value="01-">USA</option>
<option value="0044-">UK</option>
<option value="0086-">China</option>
</select>
</td>
</tr>
<tr>
<td>
Phone Number:
</td>
<td>
<input type="text" id="txtCode" readonly="readonly" onKeyDown="doCheck(this)"/>
</td>
</tr>
<tr>
<td colspan="2">
<div id="Result"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
Demo



If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

4 comments :

prasanthi said...

Nice Post.

Unknown said...

it is working fine in Internet explorer and chrome But not in Firefox, plz help me urgent

Anonymous said...

yes I have same problem.it is not working in firefox.
so I used another code as :

use jquery-1.9.1.js for ref.

$(document).ready(function () {
value = "+"+"91" + "-";
$('#field').val(value);
$('#field').val(value);
var readOnlyLength = $('#field').val().length;

$('#field').on('keypress, keydown', function (event) {
if ((event.which != 37 && (event.which != 39))
&& ((this.selectionStart < readOnlyLength)
|| ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
return false;
}
});
});









Subhash.C said...

Its good one

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.