HTML
<html>
<head>
<script src="nui://game/ui/jquery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body onkeydown="TriggeredKey(event)">
<div class="dialog">
<div class="aa"><b>Erstelle deinen Charakter</b></div>
<form id="register" name="register" action="#">
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif;">First Name</div>
<input id="firstname" type="text" class="" name="firstname" placeholder="First Name" onkeydown="if(this.value.length==16 && event.keyCode!=8)"div>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif;">Last Name</div>
<input id="lastname" type="text" class="" name="lastname" placeholder="Last Name" onkeydown="if(this.value.length==16 && event.keyCode!=8)"div>
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif;">Date of Birth (MM/DD/YYYY)</div>
<input id="dateofbirth" type="text" name="dateofbirth" class="" placeholder="Date of Birth (MM/DD/YYYY)" onfocus="(this.type='date')">
<div style="color: rgb(46, 187, 205);font-size: 12px; font-family: 'Gill Sans', sans-serif;">Height (cm)</div>
<div class="range-wrap">
<input id="height" type="range" class="range" name="height" min="120" max="220" value="120" oninput="setBubble(this, this.nextElementSibling)">
<div class="bubble"></div>
</div>
<center>
<div class="radio-toolbar">
<input type="radio" id="radiom" name="sex" value="m" checked>
<label for="radiom">Männlich</label>
<input type="radio" id="radiof" name="sex" value="f">
<label for="radiof">Weiblich</label>
</div>
</center>
<button id="submit" type="submit"><font size="4px">Erstellen</font></button>
</form>
<center><font size="1px" color="green">If the submit button doesn't work, please ensure that you've entered the fields correctly.</font></center>
</div>
<script>
const allRanges = document.querySelectorAll(".range-wrap");
allRanges.forEach(wrap => {
const range = wrap.querySelector(".range");
const bubble = wrap.querySelector(".bubble");
range.addEventListener("input", () => {
setBubble(range, bubble);
});
setBubble(range, bubble);
});
function setBubble(range, bubble) {
const val = range.value;
const min = range.min ? range.min : 0;
const max = range.max ? range.max : 100;
const newVal = Number(((val - min) * 100) / (max - min));
bubble.innerHTML = 'Height: ' + val;
bubble.style.left = `calc(${newVal}% + (${8 - newVal * 0.15}px))`;
}
var myFirstName = document.getElementById('firstname');
var myLastName = document.getElementById('lastname');
var myDOB = document.getElementById('dateofbirth');
var myHeight = document.getElementById('height');
function isNumber(e) {
var key=e.which || e.KeyCode;
if ( key >=48 && key <= 57) {
return true;
}
else {
return false;
}
}
function checkDOB() {
var date = new Date($('#dateofbirth').val());
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
if (isNaN(month) || isNaN(day) || isNaN(year)) {
myDOB.style.backgroundColor = '#E06666';
myDOB.style.color = 'black';
}
else {
var dateInput = [day, month, year].join('/');
var regExp = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dateArray = dateInput.match(regExp);
if (dateArray == null){
return false;
}
month = dateArray[1];
day= dateArray[3];
year = dateArray[5];
}
}
function TriggeredKey(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
if (window.event.keyCode == 13 || window.event.keyCode == 27) return false;
}
</script>
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>Das ist der Code.
