JSFiddle - React, Tailwind, and code Playground

by Egor Jsfiddle

HTML

<h1 align="center">Быстрая сортировка</h1>
<div>
  <p><b>Введите числа:</b></p>
  <span>через запятую, без пробела</span>
  <br><span>пропуск числа рядом с запятой равен нулю: <pre>( ,1 == 0,1 ), ( 2, == 2,0 ), (3,,5 == 3,0,5)</pre></span>
  <br>
  <input id="rslt" type="text" value="" placeholder="12,5,12,9,21" required autofocus>
  <button><b>Сортировать</b></button>
  <hr>
  <p id="test"></p>
</div>

SCSS

body {
  background: #fff;
  font-family: Tahoma;
  min-width: 400px;
}

h1 {
  font: bold 2em Calibri;
  margin: 20px 0 0 0;
  color: #5c1461;
}

div {
  background: linear-gradient(to top, #eee, #a1a1a1);
  background: -webkit-linear-gradient(to top, #eee, #a1a1a1);
  background: -o-linear-gradient(to top, #eee, #a1a1a1);
  border: 1px solid silver;
  margin: 10px 20px;
  padding: 10px;
  border-radius: 5px;
  input[type=text] {
    border: 1px solid silver;
    border-radius: 5px;
    padding: 10px 5px;
    margin: 10px 10px 10px 0;
    text-indent: 5px;
    font-size: .9em;
    width: 50%;
    min-width: 190px;
    /* width: 100%;
    max-width: 600px; */
    color: #000;
    &:hover {
      border: 1px solid #000;
    }
  }
  button {
    padding: 10px 15px;
    border-radius: 5px;
    background: silver;
    border: 1px solid grey;
    color: #000;
    cursor: pointer;
    outline: none;
    &:hover {
      background: grey;
      color: #fff;
    }
    &:active {
      background: #000;
      color: #fff;
    }
  }
  span {
    opacity: .6;
    pre {
      background: #fff;
      display: inline;
      padding: 5px 6px;
      border-radius: 3px;
      font-size: 14px;
    }
  }
}

JavaScript

var a = document.getElementById("test"),
  arr = [],
  rpl = 0,
  l, r, b, e,
  inputVal, temp = 0,
  button = document.querySelector('button');

$("#rslt").keydown(function(event) {
  if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 188 || event.keyCode == 9 || event.keyCode == 27 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39) || (event.keyCode == 191 && event.shiftKey === true)) {
    return;
  } else {
    if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105))
      event.preventDefault();
  }
});

function swap(items, l, r) { // замена элеметнов массива
  temp = items[l];
  items[l] = items[r];
  items[r] = temp;
}

function partition(items, left, right) {
  var pivot = items[Math.floor((right + left) / 2)], // сереедина
    i = left,
    j = right;
  while (i <= j) { // 0 < размера массива
    while (items[i] < pivot) {
      i++;
    }
    while (items[j] > pivot) {
      j--;
    }
    if (i <= j) {
      swap(items, i, j);
      i++;
      j--;
    }
  }
  return i;
}

function quickSort(items, left, right) {
  var index;
  if (items.length > 1) {
    index = partition(items, left, right);
    if (left < index - 1) {
      quickSort(items, left, index - 1);
    }
    if (index < right) {
      quickSort(items, index, right);
    }
  }
  return items;
}

button.addEventListener('click', function() {
  inputVal = document.querySelector('input').value;
  arr = inputVal.split(',');
  for (var i = 0; i < arr.length; i++)
    if (!arr[i])
      arr[i] = 0;
    //document.getElementById("test").innerHTML = arr;
  var result = quickSort(arr, 0, arr.length - 1);
  //for (var j = 0; j< arr.length; j++)
  	a.innerHTML = result;
});