html+js实现文本框背景及只读属性修改

最新推荐文章于 2021-06-07 16:09:19 发布

原创最新推荐文章于 2021-06-07 16:09:19 发布 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了在工作需求下接触HTML+JS的体验，详细介绍了如何通过代码实现特定功能，如改变文本框的背景色和读写权限，提供了一个实际的自学案例。

因为工作需求接触了html+js，发现了这是一个很神奇的领域，宽松的语法要求，超文本类现实的输出语言，对于主要学习C语言的我感觉特别新奇。

默认：

选择第二个radio：

具体实现的功能是选中对应的文本框背景色变为白色，内容可读写，而没有选中的文本框背景变蓝色，内容只读；

考虑到只能同时选择一个，所以前面用radio，具体代码实现如下(因为是自学的，所以代码只是我理解实现的，不一定是好代码)：

<pre><html>
<head>
<title>Set parameters</title>
<meta http-equiv="Content-Type" content="text/html">

<script LANGUAGE="JavaScript">

var check1_number = 0;

function setbackgroundcolor(id,value)
{
  switch(value)
  {
    case 1:
      document.getElementById(id).style.backgroundColor = "#99CCDD";
    break;
    case 2:
      document.getElementById(id).style.backgroundColor = "#FFFFFF";
    break;
    default:
    break;
  }
}

function checkstatus(radioname,speedname)
{
  var cname = document.getElementsByName(radioname);
  var sname = document.getElementsByName(speedname);
  for(var i=0; i<cname.length; i++)
  {
    if(cname[i].checked)
    {
      sname[i].value = 1;
      sname[i].readOnly = false;
      setbackgroundcolor(sname[i].id,2);
    }
    else
    {
      sname[i].value = 0;
      sname[i].readOnly = true;
      setbackgroundcolor(sname[i].id,1);
    }
  }
}

function setcheck(radioname,speedname,num)
{
  var cname = document.getElementsByName(radioname);
  for(var i=0; i<cname.length; i++)
  {
    if(i == num)
    {
      cname[i].checked = "checked";
    }
    else
    {
      cname[i].checked = "";
    }
  }
  checkstatus(radioname,speedname);
}
function AutoRun()
{
  setcheck('checkone','onespeed', check1_number);
}
</script>
</head>

<body bgcolor="#FFFFFF" onload="AutoRun();">
          <input id="64KR1C" type="radio" name="checkone" onClick="return checkstatus('checkone','onespeed')" >
          <input id="64KR1" type="text" name="onespeed" size="6" maxlength="6"  value="1">   
          <input id="1MR1C" type="radio" name="checkone"  onClick="return checkstatus('checkone','onespeed')">
          <input id="1MR1" type="text" name="onespeed" size="6" maxlength="6"  value="1">   
          <input id="100MR1C" type="radio" name="checkone" onClick="return checkstatus('checkone','onespeed')">
          <input id="100MR1" type="text" name="onespeed" size='6' maxlength="6"  value="1">   
</body>
</html></pre>