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
<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 Email
|
|||
4 comments :
Nice Post.
it is working fine in Internet explorer and chrome But not in Firefox, plz help me urgent
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;
}
});
});
Its good one
Note: Only a member of this blog may post a comment.