Javascript-форум - События клавиатуры.

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - События клавиатуры. (https://javascript.ru/forum/dom-window/29720-sobytiya-klaviatury.html)

События клавиатуры.

Здравствуйте,
На сайте перечитывал учебник, статья: события клавиатуры.
Из исходника вытащил код)
Вот он:

<!DOCTYPE HTML>
<html>
  <head> 
    <title>События клавиатуры</title></head>
  <body>
      Предотвратить действие по умолчанию для:<label><input type="checkbox" value="1" name="keydownStop"/> keydown</label>   <label><input type="checkbox" value="1" name="keypressStop"/> keypress</label>   <label><input type="checkbox" value="1" name="keyupStop"/> keyup</label><br/>
        Игнорировать:<label><input type="checkbox" value="1" name="keydownIgnore"/> keydown</label>   <label><input type="checkbox" value="1" name="keypressIgnore"/> keypress</label>   <label><input type="checkbox" value="1" name="keyupIgnore"/> keyup</label><br/>

Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.<br/>
<input type="text" id="kinput" placeholder="Поле для тестов" style="font-size: 150%; width: 400px;"/><br/>
Журнал:<br/>
 <textarea style="width: 402px; border: 1px solid black; height: 303px;" rows="18"/>
 <input type="button" onclick="logClear('key')" value="Очистить"/></p>

   
 <script>
$(function() {
document.getElementById('kinput').onkeydown = khandle
document.getElementById('kinput').onkeyup = khandle
document.getElementById('kinput').onkeypress = khandle
})

function khandle(e) {
debugger
  e = e || event
  if (document.forms.keyform[e.type + 'Ignore'].checked) return
   
  var evt = e.type
  while (evt.length < 10) evt += ' '
  showmesg(evt + 
    ' keyCode=' + e.keyCode + 
    ' which=' + e.which + 
    ' charCode=' + e.charCode +
    ' char=' + String.fromCharCode(e.keyCode || e.charCode) +
    (e.shiftKey ? ' +shift' : '') +
    (e.ctrlKey ? ' +ctrl' : '') +
    (e.altKey ? ' +alt' : '') +
    (e.metaKey ? ' +meta' : ''), 'key'
  )
  
  if (document.forms.keyform[e.type + 'Stop'].checked) {
    e.preventDefault ? e.preventDefault() : (e.returnValue = false)
  }
}
</script>
<style>
.key {
  border: 1px solid black;
  padding: 0 1px;
  display: inline-block;
  margin: 1px 0;
}
</style>
</head>

   
  </body>
</html>

Всё хорошо(почти), первая часть(по слово "Журнал" всё идет прекрасно),
но яваскрипт не хочет работать, ну как не хочет он записал себя в журнал.
Если не понятно выполните этот код и всё станет понятно.
Как всё сделать норм?
Чувствую части кода нет))

Цитата:

Сообщение от Александр х@к (Сообщение 187312)

Здравствуйте,
На сайте перечитывал учебник, статья: события клавиатуры.
Из исходника вытащил код)
Вот он:

<!DOCTYPE HTML>
<html>
  <head> 
    <title>События клавиатуры</title></head>
  <body>
      Предотвратить действие по умолчанию для:<label><input type="checkbox" value="1" name="keydownStop"/> keydown</label>   <label><input type="checkbox" value="1" name="keypressStop"/> keypress</label>   <label><input type="checkbox" value="1" name="keyupStop"/> keyup</label><br/>
        Игнорировать:<label><input type="checkbox" value="1" name="keydownIgnore"/> keydown</label>   <label><input type="checkbox" value="1" name="keypressIgnore"/> keypress</label>   <label><input type="checkbox" value="1" name="keyupIgnore"/> keyup</label><br/>

Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.<br/>
<input type="text" id="kinput" placeholder="Поле для тестов" style="font-size: 150%; width: 400px;"/><br/>
Журнал:<br/>
 <textarea style="width: 402px; border: 1px solid black; height: 303px;" rows="18"/>
 <input type="button" onclick="logClear('key')" value="Очистить"/></p>

   
 <script>
$(function() {
document.getElementById('kinput').onkeydown = khandle
document.getElementById('kinput').onkeyup = khandle
document.getElementById('kinput').onkeypress = khandle
})

function khandle(e) {
debugger
  e = e || event
  if (document.forms.keyform[e.type + 'Ignore'].checked) return
   
  var evt = e.type
  while (evt.length < 10) evt += ' '
  showmesg(evt + 
    ' keyCode=' + e.keyCode + 
    ' which=' + e.which + 
    ' charCode=' + e.charCode +
    ' char=' + String.fromCharCode(e.keyCode || e.charCode) +
    (e.shiftKey ? ' +shift' : '') +
    (e.ctrlKey ? ' +ctrl' : '') +
    (e.altKey ? ' +alt' : '') +
    (e.metaKey ? ' +meta' : ''), 'key'
  )
  
  if (document.forms.keyform[e.type + 'Stop'].checked) {
    e.preventDefault ? e.preventDefault() : (e.returnValue = false)
  }
}
</script>
<style>
.key {
  border: 1px solid black;
  padding: 0 1px;
  display: inline-block;
  margin: 1px 0;
}
</style>
</head>

   
  </body>
</html>

тег <textarea> имеет и закрывающий) </textarea>, а у вас его нет)
да и функции logClear() не хватает, которая находится в прикрепляемом файле на 48строке

<script src="/files/tutorial/browser/events/log.js"></script>

я уже писал http://javascript.ru/forum/dom-windo...ugaya-net.html
и исходники смотрел

Цитата:

Сообщение от Александр х@к (Сообщение 187344)

я уже писал http://javascript.ru/forum/dom-windo...ugaya-net.html
и исходники смотрел

ну так вторая половина попадает в textarea, т.к. этот тег должен иметь закрывающийся, а у вас таковой отсутствует...

Изменил код, но эффекта события клавы НЕТ(

<!DOCTYPE HTML>
<html>
  <head>
    <title>События клавиатуры</title></head>
  <body>
      Предотвратить действие по умолчанию для:<label><input type="checkbox" value="1" name="keydownStop"/> keydown</label>   <label><input type="checkbox" value="1" name="keypressStop"/> keypress</label>   <label><input type="checkbox" value="1" name="keyupStop"/> keyup</label><br/>
        Игнорировать:<label><input type="checkbox" value="1" name="keydownIgnore"/> keydown</label>   <label><input type="checkbox" value="1" name="keypressIgnore"/> keypress</label>   <label><input type="checkbox" value="1" name="keyupIgnore"/> keyup</label><br/>
 
Сфокусируйтесь на поле и нажмите какую-нибудь клавишу.<br/>
<input type="text" id="kinput" placeholder="Поле для тестов" style="font-size: 150%; width: 400px;"/><br/>
Журнал:<br/>
 <textarea style="width: 402px; border: 1px solid black; height: 303px;" rows="18"/></textarea>
 <input type="button" onclick="logClear('key')" value="Очистить"/></p>
 
    
 <script>
$(function() {
document.getElementById('kinput').onkeydown = khandle
document.getElementById('kinput').onkeyup = khandle
document.getElementById('kinput').onkeypress = khandle
})
 
function khandle(e) {
debugger
  e = e || event
  if (document.forms.keyform[e.type + 'Ignore'].checked) return
    
  var evt = e.type
  while (evt.length < 10) evt += ' '
  showmesg(evt +
    ' keyCode=' + e.keyCode +
    ' which=' + e.which +
    ' charCode=' + e.charCode +
    ' char=' + String.fromCharCode(e.keyCode || e.charCode) +
    (e.shiftKey ? ' +shift' : '') +
    (e.ctrlKey ? ' +ctrl' : '') +
    (e.altKey ? ' +alt' : '') +
    (e.metaKey ? ' +meta' : ''), 'key'
  )
   
  if (document.forms.keyform[e.type + 'Stop'].checked) {
    e.preventDefault ? e.preventDefault() : (e.returnValue = false)
  }
}
</script>
<style>
.key {
  border: 1px solid black;
  padding: 0 1px;
  display: inline-block;
  margin: 1px 0;
}
</style>
</head>
 
    
  </body>
</html>

Цитата:

Сообщение от Александр х@к (Сообщение 187358)

Изменил код, но эффекта события клавы НЕТ(

во вложениях или здесь можете слить архив с этой страницей...у вас много подключаемых ко странице дополнительных .js-файлов не хватает для полного запуска
с остальными файлами (.css, .js) сами разберетесь, что лишное, что нет