cut_copy.html 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6. <title>Text Events</title>
  7. <meta name="author" content="Fabian Jakobs">
  8. <style type="text/css" media="screen">
  9. #container {
  10. border: 1px solid black;
  11. width: 600px;
  12. }
  13. #canvas {
  14. border: 1px solid black;
  15. margin: 4px;
  16. width: 590px;
  17. height: 400px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div id="container">
  23. <textarea id="text"></textarea>
  24. <div id="canvas"></div>
  25. </div>
  26. <input type="button" value="Clear" id="some_name" onclick="document.getElementById('logger').innerHTML = ''">
  27. <div id="logger">
  28. </div>
  29. <script type="text/javascript" charset="utf-8">
  30. if (!window.console) window.console = {};
  31. if (!console.log) {
  32. var logger = document.getElementById("logger");
  33. console.log = function() {
  34. logger.innerHTML += Array.prototype.join.call(arguments, ", ") + "<br>";
  35. }
  36. }
  37. function addListener(elem, type, callback) {
  38. if (elem.addEventListener) {
  39. return elem.addEventListener(type, callback, false);
  40. }
  41. if (elem.attachEvent) {
  42. elem.attachEvent("on" + type, function() {
  43. callback(window.event);
  44. });
  45. }
  46. }
  47. var container = document.getElementById("container");
  48. var canvas = document.getElementById("canvas");
  49. var text = document.getElementById("text");
  50. function log(e) {
  51. console.log(e.type, e);
  52. }
  53. function logKey(e) {
  54. console.log(e.type, e.charCode, e.keyCode, e);
  55. }
  56. addListener(text, "keydown", logKey, false);
  57. addListener(text, "keyup", logKey, false);
  58. addListener(text, "keypress", logKey, false);
  59. addListener(text, "textInput", function(e) {
  60. console.log(e.type, e.data, e);
  61. }, false);
  62. function fillSelection() {
  63. text.value = "Juhu Kinners";
  64. text.select();
  65. }
  66. addListener(text, "copy", fillSelection, false);
  67. addListener(text, "paste", log, false);
  68. addListener(text, "cut", fillSelection, false);
  69. addListener(text, "beforecopy", log, false);
  70. addListener(text, "beforepaste", log, false);
  71. addListener(text, "beforecut", log, false);
  72. addListener(text, "compositionstart", log, false);
  73. addListener(text, "compositionupdate", log, false);
  74. addListener(text, "compositionend", log, false);
  75. addListener(text, "propertychange", function(e) {
  76. console.log(e.type, e.propertyName, e);
  77. }, false);
  78. </script>
  79. </body>
  80. </html>