Question

如何使用javascript onclick功能将密码值连续输入密码字段？

我有两个'蓝色'和'红色'图像，它们与onclick功能一起使用并具有以下值;

Blue= w3!
Red= T4.

当我点击蓝色图像时，它会输入值'w3！'进入密码字段。但是当我点击红色图像时，它会替换输入并在密码字段中变为“T4”。如何将蓝色的红色输入连接到密码字段中的“w3！T4”，而不是替换它？请在这里我需要帮助...... thx。以下是我的代码条目：

 <!DOCTYPE html>
 <html>
 <head>
 <style>    
 # red
 {width:50px;
  height:50px;
  }
 # blue
 {width:50px;
  height:50px;
  }
 </style>

 <script src="javascript/myred.js"></script>
 <script src="javascript/myblue.js"></script>
 </head>

 <body>

 <img id="red" src="images/items/blue_in.jpg" alt="no blue" onclick="myblue()">
 <img id="blue" src="images/items/red_in.jpg" alt="no red" onclick="myred()">

 <label for="password">Passcode:</label>
 <input name="password" type="password" id="password">

 </body>
 </html>

我的服务器中存储的JavaScript文件如下所示;

对于myblue：

  function myblue()
  {
  x=document.getElementById("password");  // Find the element
  x.value="w3!";    // add the content
  }

对于myred：

  function myred()
  {
  x=document.getElementById("password");  // Find the element
  x.value="T4";    // add the content
  }

请问，如何在不更换红色输入的情况下将蓝色图像的值添加到密码字段中...欢呼...欢迎评论..

Answer 1

使用+=

function myblue()
  {
  x=document.getElementById("password");  // Find the element
  x.value += "w3!";    // add the content
  }

function myred()
  {
  x=document.getElementById("password");  // Find the element
  x.value += "T4";    // add the content
  }

Answer 2

function myblue()
{
  x=document.getElementById("password");  // Find the element
  x.value += "w3!";    // add the content
}

当然，该解决方案附加字符串意味着它可能是“w3！w3！w3！T4！”取决于您点击它的频率。

function myblue()
{
  x=document.getElementById("password");  // Find the element
  if(x.value.indexOf('w3!') < 0){
    x.value += "w3!";    // add the content
  }
}

如果您只需要一次值，请使用此方法。当然，您必须将此功能更改为myred()

使用onclick函数将JavaScript值连续输入密码输入？

2 个答案: