JavaScript DHTML/Form Control/TextField

Материал из Web эксперт
Перейти к: навигация, поиск

Add textfield dynamically into HTML

   <source lang="html4strict">

/* JavaScript Bible, Fourth Edition by Danny Goodman John Wiley & Sons CopyRight 2001

  • /

<HTML> <HEAD> <TITLE>mergeAttributes() Method</TITLE> <SCRIPT LANGUAGE="JavaScript"> function doMerge(form) { 

   var newPElem = document.createElement("P")
   var newInputElem = document.createElement("INPUT")
   newInputElem.id = newInputElem.uniqueID
   newInputElem.mergeAttributes(form.field1)
   newPElem.appendChild(newInputElem)
   form.appendChild(newPElem)
   newInputElem.value = newInputElem.outerHTML

} // called by onChange event handler of fields function upperMe(field) { 

   field.value = field.value.toUpperCase()

} </SCRIPT> </HEAD> <BODY onLoad="document.expandable.field1.value = document.expandable.field1.outerHTML">

mergeAttributes() Method

<FORM NAME="expandable" onSubmit="return false">

<INPUT TYPE="button" VALUE="Append Field "Clone"" onClick="doMerge(this.form)">

<INPUT TYPE="text" NAME="field1" ID="FIELD1" SIZE=120 VALUE="" STYLE="font- size:9pt" onChange="upperMe(this)">

</FORM> </BODY> </HTML> 


 </source>


Another TextField jump

   <source lang="html4strict">

<html><HEAD><TITLE>Jump Fields Demo</TITLE> <script language=javascript>

</SCRIPT>

</HEAD> <BODY> <FORM name=phone> ( <INPUT value="" name=areacode maxlength="3" size="3" onkeyup="checklength("prefix",3,this.name)"> )  <INPUT value="" name=prefix maxlength="3" size="3" onkeyup="checklength("suffix",3,this.name)"> - <INPUT value="" name=suffix maxlength="4" size="4"> </FORM></BODY></HTML> 



 </source>


Assign a default value to a Text object

   <source lang="html4strict">

<html> <head> <title>Assign a default value to a Text object</title> <SCRIPT LANGUAGE="JavaScript">

</SCRIPT> </head> <body onLoad="findBrowser()" > 

   <form name="form1" method="POST">

Assign a default value to a Text object

Username:
<input type=text size=25 maxlength=256 name="Username">
Browser used:
<input type=text size=25 maxlength=256 name="Browser">
Email address:
<input type=text size=25 maxlength=256 name="EmailAddress">

<input type=submit value="Register"> <input type=reset value="Clear">

</form> </body> </html> 



 </source>


Auto focus textfield

   <source lang="html4strict">

<html> <head> <SCRIPT LANGUAGE="JavaScript"> function autofocus(field, limit, next, evt) { 

   evt = (evt) ? evt : event;
   var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : 
       ((evt.which) ? evt.which : 0));
   if (charCode > 31 && field.value.length == limit) {
       field.form.elements[next].focus();
   }

} </SCRIPT> </head> <body> <form> Credit Card Number: <input type="text" name="cc1" size="5" maxlength="4" 

   onkeypress="return numeralsOnly(event)" 
   onkeyup="autofocus(this, 4, "cc2", event)">  

<input type="text" name="cc2" size="5" maxlength="4" 

   onkeypress="return numeralsOnly(event)" 
   onkeyup="autofocus(this, 4, "cc3", event)">  

<input type="text" name="cc3" size="5" maxlength="4" 

   onkeypress="return numeralsOnly(event)" 
   onkeyup="autofocus(this, 4, "cc4", event)">  

<input type="text" name="cc4" size="5" maxlength="4" 

   onkeypress="return numeralsOnly(event)">

</form> </body> </html> 



 </source>


Block enter textfield

   <source lang="html4strict">

<html> <head> <SCRIPT LANGUAGE="JavaScript">

function blockEnter(evt) { 

   evt = (evt) ? evt : event;
   var charCode = (evt.charCode) ? evt.charCode :((evt.which) ? evt.which : evt.keyCode);
   if (charCode == 13) {
       return false;
   } else {
       return true;
   }

} </SCRIPT> </head> <body> <form> <input type="text" name="search" size="40" onkeydown="return blockEnter(event)" /> </form> </body> </html> 



 </source>


Call select method to highlight the text field

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butCheckForm_onclick() { 

  var myForm = document.form1;
  myForm.txtAge.blur();
  
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
  {
     document.write("missing value!");
     if (myForm.txtName.value == "")
     {
        myForm.txtName.focus();
     }
     else
     {
        myForm.txtAge.focus();
     }
  }
  else
  {
     document.write(myForm.txtName.value);
  }

} function txtAge_onblur() { 

  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
  {
     alert("Age must be a number.");
     txtAge.focus();
     txtAge.select();
  }

} function txtName_onchange() { 

  window.status = "Hi " + document.form1.txtName.value;
  document.write(document.form1.txtName.value);

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> Please enter the following details: 

  Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
       <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">

</FORM> </BODY> </HTML> 


 </source>


Change the text value in text box into upper case

   <source lang="html4strict">

<html> <head> <title>Text Object Value</title> <script type="text/javascript"> function upperMe() { 

   document.getElementById("output").value = document.getElementById("input").value.toUpperCase();

} </script> </head> <body> Enter lowercase letters for conversion to uppercase:
<form name="converter"> <input type="text" name="input" id="input" value="sample" onchange="upperMe()" />
<input type="text" name="output" id="output" value="" /> </form> </body> </html> 


 </source>


Check if a text field is empty

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butCheckForm_onclick() { 

  var myForm = document.form1;
  myForm.txtAge.blur();
  
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
  {
     document.write("missing value!");
     if (myForm.txtName.value == "")
     {
        myForm.txtName.focus();
     }
     else
     {
        myForm.txtAge.focus();
     }
  }
  else
  {
     document.write(myForm.txtName.value);
  }

} function txtAge_onblur() { 

  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
  {
     alert("Age must be a number.");
     txtAge.focus();
     txtAge.select();
  }

} function txtName_onchange() { 

  window.status = "Hi " + document.form1.txtName.value;
  document.write(document.form1.txtName.value);

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> Please enter the following details: 

  Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
       <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">

</FORM> </BODY> </HTML> 


 </source>


Check if text field input is a number

   <source lang="html4strict">

<HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> function butCheckForm_onclick() { 

  var myForm = document.form1;
  myForm.txtAge.blur();
  
  if (myForm.txtAge.value == "" || myForm.txtName.value == "")
  {
     document.write("missing value!");
     if (myForm.txtName.value == "")
     {
        myForm.txtName.focus();
     }
     else
     {
        myForm.txtAge.focus();
     }
  }
  else
  {
     document.write(myForm.txtName.value);
  }

} function txtAge_onblur() { 

  var txtAge = document.form1.txtAge;
  if (isNaN(txtAge.value) == true)
  {
     alert("Age must be a number.");
     txtAge.focus();
     txtAge.select();
  }

} function txtName_onchange() { 

  window.status = "Hi " + document.form1.txtName.value;
  document.write(document.form1.txtName.value);

} </SCRIPT> </HEAD> <BODY> <FORM NAME=form1> Please enter the following details: 

  Name:<INPUT TYPE="text" NAME=txtName onchange="txtName_onchange()">
  Age: <INPUT TYPE="text" NAME=txtAge onblur="txtAge_onblur()">
       <INPUT TYPE="button" VALUE="Check Details" NAME=butCheckForm onclick="butCheckForm_onclick()">

</FORM> </BODY> </HTML> 


 </source>


Compound Interest Calculator

   <source lang="html4strict">

<html> <head> <title>Compound Interest Calculator</title> <script language="JavaScript"> function calculate(formObj) { 

    var presentVal = parseFloat(formObj.presentVal.value);
    var intRate = parseFloat(formObj.intRate.value)/100.;
    var years = parseFloat(formObj.years.value);
  
    var futureVal = presentVal * Math.pow((1.0+intRate),years);
    var totalInt = futureVal - presentVal;
    futureVal = Math.round(futureVal*100.0)/100.0;
    totalInt  = Math.round(totalInt*100.0)/100.0;
  
    formObj.futureVal.value = futureVal;
    formObj.totalInt.value = totalInt;
  
    return;

} </script> </head>

<body>

Compound Interest Calculator

<form name="myform"> 

Present Value:        <input type="text" name="presentVal">
Interest Rate(%):     <input type="text" name="intRate">
Years of Compounding: <input type="text" name="years">
<input type="button" name="calc" value="Calculate" onclick="calculate(myform)">

Total Interest: <input type="text" name="totalInt">
Future Value:   <input type="text" name="futureVal">
<pre>
</form>
</body>
           
         
    
  </source>
    
   


==Data Validation via an onChange event Handler==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>Text Object Select/Focus</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function isNumber(inputStr) {
    for (var i = 0; i < inputStr.length; i++) {
        var oneChar = inputStr.substring(i, i + 1)
        if (oneChar < "0" || oneChar > "9") {
            alert("Please make sure entries are numbers only.")
            return false
        }
    }
    return true
}
function checkIt(form) {
    inputStr = form.numeric.value
    if (isNumber(inputStr)) {
        // statements if true
    } else {
        form.numeric.focus()
        form.numeric.select()
}
}
</SCRIPT>
</HEAD>
<BODY onSubmit="checkIt(this); return false">
<FORM>
Enter any positive integer: <INPUT TYPE="text" NAME="numeric"
 onChange="checkIt(this.form)"><P>
</FORM>
</BODY>
</HTML>
           
         
    
  </source>
    
   


==Display textfield value in new page==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
 <html>
<head>
<title>Welcome Page</title>
<script type="text/javascript">
function rewritePage(form) {
    var newPage = "<html><head><title>Page for ";
    newPage += form.entry.value;
    newPage += "</title></head><body>";
    newPage += "<h1>Hello, " + form.entry.value + "!</h1>";
    newPage += "</body></html>";
    document.write(newPage);
    document.close();
}
</script>
<body>
<h1>Welcome!</h1>
<hr>
<form onsubmit="return false;">
<p>Enter your name here: <input type="text" name="entry" id="entry"></p>
<input type="button" value="New Custom Page" onclick="rewritePage(this.form);">
</form>
</body>
</html>

           
         
    
  </source>
    
   


==Feed value from array to text box==




   
  <!-- start source code -->
   
    <source lang="html4strict">
   

<html>
<head>
<title>Simple Array Demo</title>
<script>
var counter = 0;
function upDate(){
  counter++;
  if (counter > 3){
    counter = 0;
  }
  var description = new Array(3)
  description[0] = "A";
  description[1] = "B";
  description[2] = "C";
  description[3] = "D";
  document.myForm.txtDescription.value = description[counter];
}
</script>
</head>
<body onLoad = "initialize()">
<center>
<form name = "myForm">
<input type = "text" value = "A" name = "txtDescription">
<input type = "button" value = "next" onClick = "upDate()">
</form>
</center>
</body>
</html>
   
    
    
  </source>
    
   


== Firing the onSame Event (FireFox)==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>An event of my own!</TITLE>
<SCRIPT> 
function MyClass (name, text1, text2) { 
   this.name = name; 
   this.text1 = text1; 
   this.text2 = text2; 
} 
MyClass.prototype.toString = function () { 
   return this.name; 
} 
function on_Same () { 
   alert("The two values entered in " + this.toString() + " are the same!"); 
} 
function check_Same() { 
   if (this.text1 == this.text2) { 
       this.onSame(); 
   } 
} 
MyClass.prototype.checkSame = check_Same; 
MyClass.prototype.onSame = on_Same; 
function createMyClass (name, text1, text2) { 
   var x = new MyClass (name, text1, text2); 
   x.checkSame(); 
} 
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<FORM>
<TR>
<TD>Name your object:</TD>
<TD>
<input type=text 
name="txtName">
</TD>
</TR>
<TR>
<TD>Enter first text:</TD>
<TD>
<input type=text name="txtFirst">
</TD>
</TR>
<TR>
<TD>Enter second text:</TD>
<TD>
<input type=text 
name="txtSecond">
</TD>
</TR>
<TR>
<TD>
</TD>
<TD>
<input type=button value="Do It!" onClick="createMyClass (txtName.value,txtFirst.value, txtSecond.value);">
</TD>
</TR>
</FORM>
</TABLE>
</BODY>
</HTML>

           
         
    
  </source>
    
   


==Focus an input field==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
<script type="text/javascript">
function setfocus(){
    document.forms[0].field.focus()
}
</script>
</head>
<body>
<form>
    <input type="text" name="field" size="30"> 
    <input type="button" value="Set focus" onclick="setfocus()"> 
</form>
</body>
</html>


           
         
    
  </source>
    
   


==Get textfield value==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
  <script type="text/javascript">
  <!--
    function convertText() {
      document.SampleForm.myText.value = document.SampleForm.myText.value.toUpperCase()
   }
  -->
  </script>
</head>
<body>
  <form name="SampleForm">
    <input type="text" name="myText">
    <input type="button" value="Convert" onclick="convertText()">
  </form>
</body>
</html>

           
         
    
  </source>
    
   


==Getting and Setting a Text Object"s Value==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>Text Object Value</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function upperMe(form) {
    inputStr = form.converter.value
    form.converter.value = inputStr.toUpperCase()
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="window.focus(); return false">
Enter lowercase letters for conversion to uppercase:
<INPUT TYPE="text" NAME="converter" VALUE="sample" onChange="upperMe(this.form)">
</FORM>
</BODY>
</HTML>
           
         
    
  </source>
    
   


==Getting and Setting a Text Object"s value Property==




   
  <!-- start source code -->
   
    <source lang="html4strict">
   
<html> 
<head> 
<title>Text Object value Property</title> 
<script type="text/javascript"> 
function upperMe() { 
    var field = document.forms[0].converter; 
    var upperCaseVersion = field.value.toUpperCase(); 
    field.value = upperCaseVersion; 
} 
</script> 
</head> 
<body> 
<form onsubmit="return false"> 
<input type="text" name="converter" value="sample" onchange="upperMe()"> 
</form> 
</body> 
</html> 
   
    
    
  </source>
    
   


==Get vcard name==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
    
<html>
<body>
<input id="myText" type="text" name="firstName">
<script language="JavaScript">
    document.all.myText.vcard_name = "vCard.FirstName";
</script>
</body>
</html>
    
      
        
    
  </source>
    
   


==If the textfield has been changed==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
<script language="JavaScript">
<!-- 
function taChange() {
  alert("The text-area field has changed.");
}
//-->
</script>
</head>
<body>
<form>
Enter some text: 
<input type="text" size=35 name="sometext"><p>Enter some more text:<br> 
<textarea name="tarea" rows=5 cols=40 onChange="taChange()">
</textarea>
</form>
</body>
</html>

           
         
    
  </source>
    
   


==Is Text Editable==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
    
<html>
<body>
<script language="JavaScript">
    function function1(elem) {
        elem ? alert("Yes") : alert("No");
    }
</script>
<input type="text" id="myInput" value="Input element">
<textarea id="myTxtArea">Textarea element</textarea>
<p id="myP">P element</p>
<br>
<button onclick="function1(myInput.isTextEdit);">Input</button>
<button onclick="function1(myTxtArea.isTextEdit);">TextArea</button>
<button onclick="function1(myP.isTextEdit);">Paragraph</button>
</body>
</html>
    
      
        
    
  </source>
    
   


==JavaScript Loan Calculator==



   
  <!-- start source code -->
   
    <source lang="html4strict">
  
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
<head><title>JavaScript Loan Calculator</title></head>
<body bgcolor="white">
<!-- 
  This is an HTML form that allows the user to enter data, and allows
  JavaScript to display the results it computes back to the user. The
  form elements are embedded in a table to improve their appearance.
  The form itself is given the name "loandata", and the fields within
  the form are given names like "interest" and "years".  These
  fieldnames are used in the JavaScript code that follows the form.
  Note that some of the form elements define "onchange" or "onclick"
  event handlers. These specify strings of JavaScript code to be
  executed when the user enters data or clicks on a button. 
-->
<form name="loandata">
  <table>
    <tr><td colspan="3"><b>Enter Loan Information:</b></td></tr>
    <tr>
      <td>1)</td>
      <td>Amount of the loan (any currency):</td>
      <td><input type="text" name="principal" size="12" 
                 onchange="calculate();"></td>
    </tr>
    <tr>
      <td>2)</td>
      <td>Annual percentage rate of interest:</td>
      <td><input type="text" name="interest" size="12" 
                 onchange="calculate();"></td>
    </tr>
    <tr>
      <td>3)</td>
      <td>Repayment period in years:</td>
      <td><input type="text" name="years" size="12" 
                 onchange="calculate();"></td>
    </tr>
    <tr><td colspan="3">
      <input type="button" value="Compute" onclick="calculate();">
    </td></tr>
    <tr><td colspan="3">
      <b>Payment Information:</b>
    </td></tr>
    <tr>
      <td>4)</td>
      <td>Your monthly payment will be:</td>
      <td><input type="text" name="payment" size="12"></td>
    </tr>
    <tr>
      <td>5)</td>
      <td>Your total payment will be:</td>
      <td><input type="text" name="total" size="12"></td>
    </tr>
    <tr>
      <td>6)</td>
      <td>Your total interest payments will be:</td>
      <td><input type="text" name="totalinterest" size="12"></td>
    </tr>
  </table>
</form>
<!--
  This is the JavaScript program that makes the example work. Note that
  this script defines the calculate() function called by the event
  handlers in the form.  The function refers to values in the form
  fields using the names defined in the HTML code above.
-->
<script language="JavaScript">
function calculate() {
    // Get the user"s input from the form. Assume it is all valid.
    // Convert interest from a percentage to a decimal, and convert from
    // an annual rate to a monthly rate. Convert payment period in years
    // to the number of monthly payments.
    var principal = document.loandata.principal.value;
    var interest = document.loandata.interest.value / 100 / 12;
    var payments = document.loandata.years.value * 12;
    // Now compute the monthly payment figure, using esoteric math.
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);
    // Check that the result is a finite number. If so, display the results
    if (!isNaN(monthly) && 
        (monthly != Number.POSITIVE_INFINITY) &&
        (monthly != Number.NEGATIVE_INFINITY)) {
        document.loandata.payment.value = round(monthly);
        document.loandata.total.value = round(monthly * payments);
        document.loandata.totalinterest.value = 
            round((monthly * payments) - principal);
    }
    // Otherwise, the user"s input was probably invalid, so don"t
    // display anything.
    else {
        document.loandata.payment.value = "";
        document.loandata.total.value = "";
        document.loandata.totalinterest.value = "";
    }
}
// This simple method rounds a number to two decimal places.
function round(x) {
  return Math.round(x*100)/100;
}
</script>
</body>
</html>

           
         
    
  </source>
    
   


==Jump to the next field ==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
<script type="text/javascript">
function toUnicode(elmnt,content){
    if (content.length==elmnt.maxLength){
      next=elmnt.tabIndex
      if (next<document.forms[0].elements.length){
        document.forms[0].elements[next].focus()
    }
  }
}
</script>
</head>
<body>
<form>
<input size="3" tabindex="1" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="2" maxlength="3" onkeyup="toUnicode(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="toUnicode(this,this.value)">
</form>
</body>
</html>


           
         
    
  </source>
    
   


==Letter only, yes no only textfield ==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>Letter only, yes no only textfield </TITLE>
<SCRIPT> 
function lettersOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : 
        ((evt.which) ? evt.which : 0));
    if (charCode > 31 && (charCode < 65 || charCode > 90) && 
        (charCode < 97 || charCode > 122)) {
        alert("Enter letters only.");
        return false;
    }
    return true;
}
function ynOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : 
        ((evt.which) ? evt.which : 0));
    if (charCode > 31 && charCode != 78 && charCode != 89 && 
        charCode != 110 && charCode != 121) {
        alert("Enter \"Y\" or \"N\" only.");
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form>
Signature Present: <input type="text" name="signature" size="2" maxlength="1" 
onkeypress="return ynOnly(event)" /> (Y/N)
</form>
</body>
</html>
           
         
    
  </source>
    
   


== Methods and Properties of the Text Object==



   
  <!-- start source code -->
   
    <source lang="html4strict">
  
  Method
blur()            Removes the focus from the text box.
focus()           Gives the focus to the text box.
handleEvent()     Invokes the default handler for the specified event.
select()          Selects the text in the text box.
 Property
defaultValue      Returns the value of this text box, specified by the value attribute. 
form              Returns the entire form the text box is in.
name              Returns the name, specified by the name attribute.
type              Returns the type specified by the type attribute.
value             Returns the value that is actually displayed in the text box.
           
         
    
  </source>
    
   


==Numerals Only==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>Numerals Only</TITLE>
<SCRIPT> 
function numeralsOnly(evt) {
    evt = (evt) ? evt : event;
    var charCode = (evt.charCode) ? evt.charCode : ((evt.keyCode) ? evt.keyCode : 
        ((evt.which) ? evt.which : 0));
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        alert("Enter numerals only in this field.");
        return false;
    }
    return true;
}
</script>
</head>
<body>
<form>
<input type="text" ... onkeypress="return numeralsOnly(event)">
</form>
</body>
</html>
           
         
    
  </source>
    
   


==Passing a Text Object (as this) to the Function==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>Text Object Value</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function upperMe(field) {
    field.value = field.value.toUpperCase()
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="window.focus(); return false">
Enter lowercase letters for conversion to uppercase:
 <INPUT TYPE="text" NAME="converter" VALUE="sample" onChange="upperMe(this)">
</FORM>
</BODY>
</HTML>
           
         
    
  </source>
    
   


==Resetting a Text Object to Default Value==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<HTML>
<HEAD>
<TITLE>Text Object DefaultValue</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function upperMe(field) {
    field.value = field.value.toUpperCase()
}
function resetField(form) {
    form.converter.value = form.converter.defaultValue
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="window.focus(); return false">
Enter lowercase letters for conversion to uppercase:
<INPUT TYPE="text" NAME="converter" VALUE="sample" onChange="upperMe(this)">
<INPUT TYPE="button" VALUE="Reset Field"
onClick="resetField(this.form)">
</FORM>
</BODY>
</HTML>

           
         
    
  </source>
    
   


==Selecting Text Upon Focus==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
<title>Selecting Text Upon Focus</title>
</head>
   
<body>
    <form name="form1" method="POST">
    <h2>Selecting Text Upon Focus</h2>
    <p>Username:<br>
    <input type=text size=25 maxlength=256 name="Username" onFocus="this.select()"><br>
    Browser used:<br>
    <input type=text size=25 maxlength=256 name="Browser" onFocus="this.select()"><br>
    Email address:
    <strong> <br>
    </strong>
    <input type=text size=25 maxlength=256 name="EmailAddress"onFocus="this.select()">
    </p>
    <h2>
    <input type=submit value="Register"> 
    <input type=reset value="Clear">
    </h2>
    </form>
</body>
</html>
           
         
    
  </source>
    
   


==Select the textfield and focus==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
<script type="text/javascript">
    function setfocus(){
        document.forms[0].txt.select()
        document.forms[0].txt.focus()
    }
</script>
</head>
<body>
<form>
<input type="text" name="txt" size="30" value="Hello World!"> 
<input type="button" value="Select text" onclick="setfocus()"> 
</form>
</body>
</html>

           
         
    
  </source>
    
   


==Show TextField value in Dialog==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
<html>
<head>
<script language="JavaScript">
<!--
function sendData(arg) {
  alert("The " + arg.name + " field has changed.");
}
//-->
</script>
</head>
<body>
<form>
<table>
<tr>
 <td>Name:</td>
 <td><input name="persname" type="text" onChange="sendData(this)"></td>
</tr>
<tr>
  <td>E-mail:</td>
  <td><input name="email" type="text"></td>
</tr>
</table>
</form>
</body>
</html>

           
         
    
  </source>
    
   


==Text Field autocomplete Example==




   
  <!-- start source code -->
   
    <source lang="html4strict">
  
    
<html>
<head>
<script>
    function function1() {
        document.all.myName.autocomplete = "on"; 
    } 
</script>
</head>
<body onLoad="function1();">
    <form name="form1" method="post" action="">
        <pre>
            1. Type your name in the text field.
            2. Press "Submit" button.
            3. Type the first letter of your name again.
            4. Check the autofill feature.
        
       <input type="text" size=30 name="text2" id="myName">
       <input type="submit" value="Submit">
   </form>

</body> </html> 



 </source>


TextField focus and select all

   <source lang="html4strict">

<html> <head> <script language="JavaScript">

</script> </head> <body> <form> 

Field1 <input name="f1" onBlur="checkField(this.form)"><br>
Field2 <input name="f2">

</form> </body> </html> 


 </source>


TextField focus, blur, and click action

   <source lang="html4strict">

<HTML> <HEAD> <BODY> <A HREF="http://www.wbex.ru" onMouseOver="window.alert("Sorry!");"> wbex.ru!</A>

<FORM> Phone Number: <INPUT type="text" size="25" onFocus="window.alert("Format is xxx-xxxx.");">
Name: <INPUT type="text" size="25" onBlur="window.alert("onBlur!");">
E-mail Address: <INPUT type="text" size="25"> <P> <INPUT type="button" value="Click Here." onClick="window.alert("onClick")";> </FORM> </BODY> </HTML> </source>

TextField get Focus and clear content

   <source lang="html4strict">

<html> <head> <title>Clear Form Demo</title> <script language="javascript">

</script> </head> <body> <form name="testform"> 

   <input type="text" name="email" value="Something here." onfocus="ClearForm();">

</form> </body> </html> 


 </source>


Text field tab Index

   <source lang="html4strict">

<html> <body> <input type="text" value="Tab 1" tabindex="0"</input> <input id="myText" type="text" value="Tab 2" tabindex="1"</input> <button onclick="alert(myText.tabIndex);">Tab Index of second text box</button> </body> </html> 



 </source>


Text Object Select and Focus

   <source lang="html4strict">

<HTML> <HEAD> <TITLE>Text Object Select/Focus</TITLE> <SCRIPT LANGUAGE="JavaScript"> function isNumber(inputStr) { 

   for (var i = 0; i < inputStr.length; i++) {
       var oneChar = inputStr.charAt(i)
       if (oneChar < "0" || oneChar > "9") {
           alert("Please make sure entries are integers only.")
           return false
       }
   }
   return true

} function checkNumeric(fld) { 

   var inputStr = fld.value
   if (isNumber(inputStr)) {
       // statements if true
   } else {
       setTimeout("doSelection(document." + fld.form.name + ". " + fld.name + ")", 0)
   }

} function doSelection(fld) { 

   fld.focus()
   fld.select()

} </SCRIPT> </HEAD> <BODY> <FORM NAME="entryForm" onSubmit="return false"> Enter any positive integer: <INPUT TYPE="text" NAME="numeric"><P> <INPUT TYPE="button" VALUE="Verify" onClick="checkNumeric(this.form.numeric)"> </FORM> </BODY> </HTML>


</source>

Источник — «http://www.wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/TextField&oldid=2531»