Textbox for Document No
In every business application there is a need to display and getting input for a document number. The most convenient way for that is using a single textbox control but part--usually the prefix--of it is not editable like shown in the picture below:
I have made a javascript function to create that kind of textbox. All that you have to do just use it like this:
<html>
<body>
<input type="text" id="txt1"><br>
<!--
<input type="text" id="txt2">
<input type="text" id="txtNumber">
-->
<script language="javascript">
var txt = document.all.txt1;
var NonDeletableString = "SO-2007-A1-";
txt.value = NonDeletableString;
ApplyDocumentNoControl(txt, NonDeletableString);
</script>
</body>
Here is the complete javascript functions:
function ApplyDocumentNoControl(TextBoxControl, PrefixString){
TextBoxControl.NonDeletableString = PrefixString;
TextBoxControl.onselect = function(){
var selectionRange = this.createTextRange();
if(selectionRange.text.length > this.NonDeletableString.length){
if(selectionRange.text.substring(0, this.NonDeletableString.length)
== this.NonDeletableString){
selectionRange.moveStart('character', this.NonDeletableString.length);
selectionRange.select();
}
}
}
TextBoxControl.onkeydown = function(){
//alert(this.NonDeletableString);
if((event.keyCode == 8)
|| (event.keyCode == 37)
|| (event.keyCode == 33)){
if(doGetCaretPosition(this) <= this.NonDeletableString.length){
event.returnValue = false;
}
}
//home key
if((event.keyCode == 36) && !(event.shiftKey)){
setCaretPosition(this, this.NonDeletableString.length);
event.returnValue = false;
}
}
TextBoxControl.onfocus = function(){
setCaretPosition(this, this.NonDeletableString.length);
}
TextBoxControl.onkeypress = function(){
var selectionRange = document.selection.createRange();
if(selectionRange.text == this.NonDeletableString){
event.returnValue = false;
}
}
TextBoxControl.onkeyup = function(){
if(doGetCaretPosition(this) < this.NonDeletableString.length){
setCaretPosition(this, this.NonDeletableString.length);
}
if(this.value.substring(0, this.NonDeletableString.length) != this.NonDeletableString){
var remaining = this.value.substring(this.NonDeletableString.length, this.value.length)
this.value = this.NonDeletableString + remaining;
}
}
}
function doGetCaretPosition (ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function getCaretPosition (el)
{
var iCaretPos = 0;
if (document.selection){
if (el.type == 'text') {
var selectionRange = document.selection.createRange();
selectionRange.moveStart ('word', -el.value.length);
iCaretPos = selectionRange.text.length;
}
else {
iCaretPos = Math.abs(document.selection.createRange().moveStart("character", -1000000)) - 193;
}
}
else if (el.selectionStart || el.selectionStart == '0') {
iCaretPos = el.selectionStart
}
return iCaretPos;
}
function setCaretPosition(el, iCaretPos)
{
if (document.selection) {
var range = document.selection.createRange();
if (el.type == 'text') {
range.moveStart ('character', -el.value.length)
range.moveEnd ('character', -el.value.length)
range.moveStart ('character', iCaretPos)
range.select()
}
else {
range.collapse(false)
range.move ('character', iCaretPos - el.value.length + el.value.split('\n').length - 1)
range.select()
}
}
else if (el.selectionStart || el.selectionStart == '0') {
el.setSelectionRange(iCaretPos, iCaretPos)
}
}