suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Methode zum Implementieren des Klickens auf ein Optionsfeld, um den Inhalt des Textfelds im Eingabefeld zu ändern_javascript-Fähigkeiten

JavaScript-Methode zum Implementieren des Klickens auf ein Optionsfeld, um den Inhalt des Textfelds im Eingabefeld zu ändern_javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:45:411940Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie mithilfe von JavaScript den Inhalt des Textfelds im Eingabefeld ändern, indem Sie auf ein Optionsfeld klicken. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Methode hier besteht darin, auf das Optionsfeld zu klicken, um den Inhalt des Textfelds im Eingabefeld zu ändern. Es handelt sich um eine einfache Anwendung von JavaScript, die die Benutzereingaben reduzieren und die Benutzerfreundlichkeit verbessern kann Dieselbe Funktion wie eine TAB-Registerkarte, und Sie können das Formular nach dem Ausfüllen absenden, was es wert ist, erlernt zu werden.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt: 

<html>
<head>
<title>JavaScript点击单选框改变输入框内容</title>
</head>
<body>
<script language=JavaScript>
var defaultValue = ""
function Changes() {
var defaultValue = "changed";
}
ie = document.all&#63;1:0
ns4 = document.layers&#63;1:0
var c = 1
function hideIt(id) {
if (ie) {
document.all[id].style.zIndex = c--; 
document.all[id].style.visibility = "hidden";
document.all['hider'].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c--;
document.layers[cat].layers[id].visibility = "hide";
document.layers[cat].layers['hider'].visibility = "show";
} 
}
function showIt(id) {
if (ie) {
document.all[id].style.zIndex = c++; 
document.all[id].style.visibility = "visible";
} 
else if (ns4) {
document.layers[cat].layers[id].zIndex = c++;
document.layers[cat].layers[id].visibility = "show";
}
else {
document.getElementById(id).style.zIndex = c++; 
document.getElementById(id).style.visibility = "visible"; 
} 
}
function imgLbl(tab) {
premier = frmWc.elements[tab - 1];
if (premier.checked == 1) {
premier.checked = 0;
} else {
premier.checked = 1;
}
}
</script>
<FORM name=protectForm action="" method=post >
  <TABLE width=560>
  <TR>
 <TD>
  <TABLE cellPadding=2>
  <TR align=left>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'off');return true" type=radio value=0 
  name=Level checked>
  ASP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'low');return true" type=radio 
  value=25 name=Level>
  PHP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left>
  <INPUT 
  onclick="showIt( 'high');return true" type=radio value=75 name=Level>
  JSP</TD>
  <TD align=left width=20> </TD>
  <TD vAlign=top align=left><INPUT 
  onclick="showIt( 'excl');return true" type=radio 
  value=100 name=Level>
  AJAX</TD>
  </TR></TABLE></TD></TR></TABLE>
  <table cellspacing=1 cellpadding=0 width=562 border="0" bgcolor="7285CF" height="240">
  <tr> 
  <td colspan=3 height="145" valign="top" bgcolor="F2F2F2"> 
  <div id=off style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560" border="0">
  <tr> 
  <td width="560">ASP是一种微软发明的WEB动态编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=low 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 2; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr >
  <td width="1237">PHP是一种开源、免费平台通用型WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=high 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr>JSP是SUN公司制造的基于JAVA的WEB编程容器，也是一种WEB编程语言。</td>
  </tr>
 </table>
 </div>
  <div id=excl 
  style="WIDTH: 560px;POSITION: absolute; HEIGHT: 230; z-index: 1; visibility: hidden; background-color: F2F2F2; layer-background-color: F2F2F2; border: 1px none #000000"> 
  <table cellspacing=5 cellpadding=2 width="560">
  <tr> 
  <td width="953">AJAX是一种WEB交互型框架语言，可以很好的提升用户体验。</td>
  </tr>
 </table>
 </div> 
 </td>
 </tr>
 </table>
 <TABLE cellSpacing=0 cellPadding=0 width=560>
  <TR>
  <TD align=right height="30"> 
  <INPUT class=bottom type=submit value=" 确定 "> 
  <INPUT class=bottom type=button value=" 取消 " name="Button"> 
 </TD></TR></TABLE>
 </FORM>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Methode, um zu bestimmen, ob ein Unterformular geschlossen ist_Javascript-KenntnisseNächster Artikel：js-Methode, um zu bestimmen, ob ein Unterformular geschlossen ist_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen