Python1320/gmod_altgrproblems.lua

## gmod_altgrproblems.lua
local DermaPanel = vgui.Create( "DFrame" )
DermaPanel:SetPos( 100, 100 )
DermaPanel:SetSize( 500,800 )
DermaPanel:SetDraggable( true )
DermaPanel:MakePopup()


local a=vgui.Create'DHTML'
a:SetParent(DermaPanel)
a:Dock(FILL)
a:SetHTML[[
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div class="fx">
  <div>
    <textarea rows="5" name="test-target" id="test-target"></textarea>
    <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
  </div>
  <div class="flex">
    <pre id="console-log"></pre>
  </div>
</div>
      <script>let textarea = document.getElementById('test-target'),
consoleLog = document.getElementById('console-log'),
btnClearConsole = document.getElementById('btn-clear-console');


HTMLTextAreaElement.prototype.insertAtCaret = function (text) {
  text = text || '';
  if (document.selection) {
    // IE
    this.focus();
    var sel = document.selection.createRange();
    sel.text = text;
  } else if (this.selectionStart || this.selectionStart === 0) {
    // Others
    var startPos = this.selectionStart;
    var endPos = this.selectionEnd;
    this.value = this.value.substring(0, startPos) +
      text +
      this.value.substring(endPos, this.value.length);
    this.selectionStart = startPos + text.length;
    this.selectionEnd = startPos + text.length;
  } else {
    this.value += text;
  }
};

function logMessage(message) {
  document.getElementById("console-log").innerHTML += message + "<br>";
}

textarea.addEventListener('keydown', (e) => {

    logMessage(`Key1 "${e.keyCode}" alt=${e.altKey} repeat=${e.repeat} repeating  [event: keydown]`);
});

textarea.addEventListener('beforeinput', (e) => {
  if (e.data=="¨" ||e.data=="¨"){ textarea.insertAtCaret("~"); e.preventDefault(); }
  if (e.data=="§" ||e.data=="§"){ textarea.insertAtCaret("\\"); e.preventDefault(); }
  if (e.data=="½" ||e.data=="½"){ textarea.insertAtCaret("|"); e.preventDefault(); }
  logMessage(`Key2 "${e.data}" about to be input  [event: beforeinput]`);
});

textarea.addEventListener('input', (e) => {
  logMessage(`Key3 "${e.data}" input  [event: input]`);
});

textarea.addEventListener('keyup', (e) => {
  if (!e.altKey && e.key=="["){ textarea.insertAtCaret("[") }
  if (!e.altKey && e.key=="]"){ textarea.insertAtCaret("]") }

  if (e.altKey && e.altKey && e.key=="p"){ textarea.insertAtCaret("\\"); e.preventDefault(); }
  if (!e.altKey && e.key=="{"){ textarea.insertAtCaret("{") }
  if (!e.altKey && e.key=="}"){ textarea.insertAtCaret("}") }
  if (!e.altKey && e.key=="@"){ textarea.insertAtCaret("@") }
  if (!e.altKey && e.key=="¨"){ textarea.insertAtCaret("~"); e.preventDefault(); }

  logMessage(`Key4 "${e.key}" alt=${e.altKey} released  [event: keyup]`);
});

btnClearConsole.addEventListener('click', (e) => {
  let child = consoleLog.firstChild;
  while (child) {
   consoleLog.removeChild(child);
   child = consoleLog.firstChild;
  }
});</script>
  </body>
</html>]]
	local DermaPanel = vgui.Create( "DFrame" )
	DermaPanel:SetPos( 100, 100 )
	DermaPanel:SetSize( 500,800 )
	DermaPanel:SetDraggable( true )
	DermaPanel:MakePopup()


	local a=vgui.Create'DHTML'
	a:SetParent(DermaPanel)
	a:Dock(FILL)
	a:SetHTML[[
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	</head>
	<body>
	<div class="fx">
	<div>
	<textarea rows="5" name="test-target" id="test-target"></textarea>
	<button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button>
	</div>
	<div class="flex">
	<pre id="console-log"></pre>
	</div>
	</div>
	<script>let textarea = document.getElementById('test-target'),
	consoleLog = document.getElementById('console-log'),
	btnClearConsole = document.getElementById('btn-clear-console');


	HTMLTextAreaElement.prototype.insertAtCaret = function (text) {
	text = text \|\| '';
	if (document.selection) {
	// IE
	this.focus();
	var sel = document.selection.createRange();
	sel.text = text;
	} else if (this.selectionStart \|\| this.selectionStart === 0) {
	// Others
	var startPos = this.selectionStart;
	var endPos = this.selectionEnd;
	this.value = this.value.substring(0, startPos) +
	text +
	this.value.substring(endPos, this.value.length);
	this.selectionStart = startPos + text.length;
	this.selectionEnd = startPos + text.length;
	} else {
	this.value += text;
	}
	};

	function logMessage(message) {
	document.getElementById("console-log").innerHTML += message + "<br>";
	}

	textarea.addEventListener('keydown', (e) => {

	logMessage(`Key1 "${e.keyCode}" alt=${e.altKey} repeat=${e.repeat} repeating [event: keydown]`);
	});

	textarea.addEventListener('beforeinput', (e) => {
	if (e.data=="¨" \|\|e.data=="¨"){ textarea.insertAtCaret("~"); e.preventDefault(); }
	if (e.data=="§" \|\|e.data=="§"){ textarea.insertAtCaret("\\"); e.preventDefault(); }
	if (e.data=="½" \|\|e.data=="½"){ textarea.insertAtCaret("\|"); e.preventDefault(); }
	logMessage(`Key2 "${e.data}" about to be input [event: beforeinput]`);
	});

	textarea.addEventListener('input', (e) => {
	logMessage(`Key3 "${e.data}" input [event: input]`);
	});

	textarea.addEventListener('keyup', (e) => {
	if (!e.altKey && e.key=="["){ textarea.insertAtCaret("[") }
	if (!e.altKey && e.key=="]"){ textarea.insertAtCaret("]") }

	if (e.altKey && e.altKey && e.key=="p"){ textarea.insertAtCaret("\\"); e.preventDefault(); }
	if (!e.altKey && e.key=="{"){ textarea.insertAtCaret("{") }
	if (!e.altKey && e.key=="}"){ textarea.insertAtCaret("}") }
	if (!e.altKey && e.key=="@"){ textarea.insertAtCaret("@") }
	if (!e.altKey && e.key=="¨"){ textarea.insertAtCaret("~"); e.preventDefault(); }

	logMessage(`Key4 "${e.key}" alt=${e.altKey} released [event: keyup]`);
	});

	btnClearConsole.addEventListener('click', (e) => {
	let child = consoleLog.firstChild;
	while (child) {
	consoleLog.removeChild(child);
	child = consoleLog.firstChild;
	}
	});</script>
	</body>
	</html>]]