Событие onkeyup или onkeypress javascript - обновление статуса пароля

Question

Первый вопрос программирования (из школ w3)

Пример программирования ниже (из школ W3) хорош и прост, он работает на их веб-сайте, но я действительно в чем-то растерялся.

onkeypress="return noNumbers(event)"

почему перед функцией происходит возврат? Что оно делает? Если вы знаете ответ на этот вопрос - как вы узнали эту информацию? Я полагаю, что она позволяет функции, нажатой на клавишу, продолжать обрабатывать нажатие клавиши, поскольку мое событие «прервало» ее?

также - Я пытался понять, что такое «событие». Это не похоже на ключевое слово. Я провел> час, пытаясь найти, что это такое. Кажется, он не назначен нигде в их примере кода. Обычно в этом месте вы увидите «это». Если это не назначенная переменная, она всегда будет передавать обработчик события? Confused ...

Что я хочу сделать с их функцией

Я хочу сделать проверку надежности пароля при вводе. Я смотрел на их пример, чтобы понять, как захватывать ключи (кросс-браузер и минимальный 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.

также , ЭТО ПЛОХО, как я передаю имя? он посылает pword функции, но я что-то не так делаю? Должен ли я просто сделать его постоянной строкой? Это работает как есть, но иногда только потому, что что-то работает ... не значит, что это правильно. :)

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

Моя функция проверки полей работает (я использую ее после каждого поля), которую я недавно добавил в 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 рядом с полем пароля, чтобы сказать: «Слабый», «Хорошо», «Хороший», «Идеальный» или что-то в этом духе для статуса пароля. Я хотел бы сделать это так, как Google делает это с графикой слева от поля, но я не знаю, как это сделать просто. лол.

Мой путь исправим? У вас есть лучший способ сделать это, о котором я не знаю? Очень признателен. В ожидании вливания мудрости ...

Answer 1

Просто к вашим первым вопросам программирования:

• Ваше предложение верно, чтобы вернуть значение внутри события позволяет прервать действие в зависимости от значения содержимого. Возвращение false внутрь onclick закончится в щелчке не будет сделано. Так что <a href="http://test.de" onclick="return false;">linkname</a> не будет связывать вас с чем-либо, если JavaScript активен.
• event - это просто переменная, объявленная до фактического события, дальнейшее объяснение приведено ниже.

Вам известны атрибуты eventhandler элементов в JavaScript? Это функции, т.е.

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 s.

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? Просто относитесь к нему как к нормальной переменной.
• Объединяя приведенную выше информацию и пример в вашем вопросе, вы сможете узнать, какая клавиша была нажата.

Answer 2

1) Слово «return» делает так, что если функция возвращает false, то она возвращается к событию и останавливает обработку нажатия клавиш браузером (и появляется в поле ввода, если это событие включено).

2) event - это объект события, который содержит информацию о событии, например, какую кнопку нажали, где произошло событие и т. Д.

3) Да, плохо, как вы передаете name, потому что вы не передаете его. Вместо этого используйте this.name.

4) В этом случае вам не нужен return, потому что вы не пытаетесь остановить добавление нажатия клавиши в текстовое поле. Точно так же вам не нужно передавать event, потому что вы можете передать this.value, чтобы получить содержимое текстового поля.

5) Вы можете просто передать this вместо this.name, this.value или любых других значений. Затем в функции получить свойства из одного аргумента.

6) Как только вы передадите все значение с помощью this.value, вы можете запустить свои тесты для этого. Абсолютно не нужно знать, какая клавиша была нажата, тем более, что такие вещи, как Ctrl+V, могут вас полностью подставить.

7) Вы можете иметь <div> и изменить его ширину и / или цвет фона, чтобы сделать своего рода индикатор полосы прочности.