Onkeyup或onkeypress javascript事件问题-密码状态更新

onkeyup or onkeypress javascript event issue - password status updates

本文关键字：密码 状态 更新 问题 事件 onkeypress javascript Onkeyup      更新时间：2023-09-26

编程问题第一(来自w3学校)

下面的编程示例(来自W3学校)很好很容易，它在他们的网站上工作，但我真的很困惑。

onkeypress="return noNumbers(event)"

为什么在函数之前有一个返回?它是做什么的?如果你知道这个问题的答案——你是怎么找到这个信息的?我的猜测是，它允许按键函数继续处理击键，因为我的事件"中断"了吗?

也 -我一直在试着看看什么是"事件"。这似乎不是一个关键字。我花了2个小时试图找出它是什么。在他们的代码示例中，它似乎没有被分配到任何地方。通常在那个位置你会看到"this"。如果它是一个未分配的变量，它总是传递事件处理程序吗?困惑…

我想用他们的函数做什么

我想做一个密码强度检查，因为你键入。我在看他们的例子，所以我可以弄清楚如何捕获密钥(跨浏览器和最小的IE7)。我的想法是……

<input type="password" name="pword" maxlength="50" size="50" id="field_pword" onkeyup="PasswordStrength(name, 8, 'relaxed')" onblur="CheckField(name, 8, 1)">

注意:是的，我知道最好在html之外分配事件处理程序，但我看不到传递变量的方法，除非它是内联的。我是个新手，所以我可能忽略了一些东西，但是……这就是为什么我在HTML中这么做的原因。

还有，我传递名字的方式不好吗?它确实将word发送给函数，但我做错了什么吗?我应该让它成为一个常量字符串吗?它可以正常工作，但有时只是因为某些东西有效……并不意味着它是正确的。:) 

onkeyup="PasswordStrength('pword', 8, 'relaxed')" onblur="CheckField('pword', 8, 1)">

我的checkfield函数工作(我在每个字段之后使用它)，我最近在PasswordStrength中添加。我的问题是……我的新函数没有传递事件处理程序，所以我怎么能检查按下什么键?我可以这样做吗?

onkeyup="PasswordStrength(name, 8, 'relaxed', event)"

还是应该读作…

onkeyup="return PasswordStrength(name, 8, 'relaxed', event)"

如果我不能传递任何'事件'是这样的，在我的函数内，我能准确地得到什么键按下没有一个大混乱的代码?因为我正在学习，我需要的例子是尽可能简单(请)。

使用我的函数，我打算这样做，但我仍然不知道如何获得按下的键…

function PasswordStrength(sField, iMinLength, sStrength, e?)
{
var form = document.forms[0];
var gc = form[sField].value;
    // once I have the value I can do checking but it would be nice to have WHAT key
    // was pressed
    // the e? above is where I was thinking of passing the event

W3示例我从…中获取一些知识

function noNumbers(e)
{
var keynum;
var keychar;
var numcheck;
if(window.event) // IE
{
keynum = e.keyCode;
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which;
}
keychar = String.fromCharCode(keynum);
numcheck = /'d/;
return !numcheck.test(keychar);
}
</script>
<form>
Type some text (numbers not allowed):
<input type="text" onkeypress="return noNumbers(event)" />
</form>
</body>
</html>

当有人打字时，我将使用密码字段旁边的innerHTML更改文本，说"弱"，"好"，"好"，"完美"或沿着密码状态的那些行。我很想用谷歌的方式在字段的左边加上一个图形，但我不知道如何简单地做到这一点。lol .

我的路是可修复的吗?你有我不知道的更好的办法吗?感谢。等待智慧的注入…

回答你的第一个编程问题:

  • 你的建议是正确的，在事件内部返回一个值允许您根据值内容中断操作。在onclick中返回false将结束在点击不做。所以<a href="http://test.de" onclick="return false;">linkname</a>不会把你和任何东西联系起来
  • event只是在它运行到实际事件之前声明的一个变量，下面将进一步解释。

你知道JavaScript中元素的eventandler属性吗?它们是函数，即

document.createElement('div').onclick = function( event ){
  //do something...
  return true || false;
};

如果你给一个标签分配一个onclick属性，这只是创建这个匿名函数的另一种调整方式。所以

<input onclick="this.value = 'can''t click me :P Mouse X: ' + event.clientX; return false;" type="text" id="ip" />

的行为就像您创建了一个接受参数event的匿名函数。

window.onload = function(){
  document.getElementById('ip').onclick = function( event ){
    this.value = 'can''t click me :P Mouse X: ' + event.clientX; return false;
  };
};

这将表现为完全相等，除了延迟的赋值。

this关键字总是你要访问的属性函数的所有者对象，或者你要传递给apply/call方法的对象。在本例中，它显然是所有者——DOM元素。所以this.value是input的值。

传递给函数的event只是一个对象，其中包含有关当前浏览器状态和其他一些有用信息。它在不同的浏览器中有不同的属性，填充不同的值，但主要功能是相同的。

  • 如上所述，无论你写的是你所做的还是这样都没有区别:
window.onload = function(){
  var yourElement = document.getElementsByTagName('pword')[0];
  yourElement.onkeyup = function( event ){
    PasswordStrength(this.name, 8, 'relaxed')
  };
};
  • 不，它真的不是坏使用name ..无论何时访问所有者对象的属性，都可以省略this关键字。因此，它与写
    • 的冲突是相同的。
<script type="text/javascript">//<![CDATA[
 onload = function(){ alert('hello!') };
//]]></script>

而不是window.onload或this.onload甚至this.window.onload(这在理论上都是有效的，因为所有包含对象都有一个名为window的属性，该属性引用自己)。你可以说这是惯例问题。但是，由于始终通过this关键字访问自己的属性(window除外，您应该通过其属性window访问)的惯例得到了强有力的建立和支持，因此您可能应该编写this.name。

  • 这取决于你是否想最终中断事件，不让用户完成他的keyup。以上解释。
    • 为什么不能传递event对象?把它当作一个正常的变量。
  • 结合上面的信息和你问题中的例子，你应该能够得到关于按下哪个键的知识。

1) "return"字使得如果函数返回false，它将被传递回事件并停止由浏览器处理击键(并出现在输入字段中，如果这就是事件所在的位置)。

2) event是Event对象，它包含关于事件的信息，例如按了什么键，在哪里触发了事件等。

3)是的，你通过name的方式很糟糕，因为你没有通过它。用this.name代替。

4)在这种情况下，您不需要return，因为您没有试图阻止将击键添加到文本框中。同样，您不需要通过event，因为您可以通过this.value来获取文本框的内容。

5)你可以只传递this而不是this.name, this.value或任何其他值。然后，在函数中，从单个参数中获取属性。

6)一旦您通过this.value传递整个值，您就可以在其上运行测试。完全没有必要知道按了什么键，特别是像Ctrl+V这样的东西会完全把你搞砸。

你可以有一个<div>，改变它的宽度和/或背景颜色，使其成为一种强度条指示器。
相关文章：