Форум

Teamur · #1 (**permalink**) 29.06.2015, 19:06

ЦЕЛЬ: Последовательное замкнутое переключение регистра выделенного пользователем текста клавишами ВВЕРХ, ВНИЗ.

1) Например, есть текст:

Установлено, что смесь двух изотопов, дейтерия и трития, требует меньше энергии для реакции синтеза по сравнению с энергией, выделяемой во время реакции.

2) Выделяем мышкой: смесь двух изотопов
3) Нажимаем клавишу ВВЕРХ:
Первое нажатие -> Смесь двух изотопов
Второе нажатие -> СМЕСЬ ДВУХ ИЗОТОПОВ
Третье нажатие -> смесь двух изотопов
и тд ... -> замкнутое переключение. При этом само выделение не должно сниматься во время переключений!
4) Если же нажимать клавишу ВНИЗ, то смена регистра будет происходить в обратном порядке: ВЕРХНИЙ РЕГИСТР -> Как в предложениях -> нижний регистр ->...

Я пробовал изменить регистр выделения клавишей Enter, но не получилось:

document.onkeyup = function (e) {
    if (e.keyCode == 13) {
        var selection = window.getSelection()
        if (selection.style.textTransform = 'inherit') {
        selection.style.textTransform = 'uppercase';
        }
        else {
        selection.style.textTransform = 'inherit';
        }
    return false;
    }
}

Надеюсь на Вашу помощь, уважаемые программисты!

Teamur · #2 (**permalink**) 30.06.2015, 19:20

Где же вы где?

Aetae · #3 (**permalink**) 30.06.2015, 20:12

Это напряжно.)

MallSerg · #4 (**permalink**) 30.06.2015, 21:04

Это вопрос или заказ?

Malleys · #5 (**permalink**) 30.06.2015, 22:04

<!DOCTYPE html>
<html>
  <body>
    <div id="inset">Установлено, что смесь двух изотопов, дейтерия и трития, требует меньше энергии для реакции синтеза по сравнению с энергией, выделяемой во время реакции.</div>
  <script>
    
  String.prototype.capitalize = function () {
    return this.charAt(0).toUpperCase() + this.substring(1).toLowerCase();
  }
  
  Math.mod = function(a, b) {
    return (b + (a % b)) % b;
  };
  
  (function() {
    var actions = ['toUpperCase', 'capitalize', 'toLowerCase'];
    var selection = window.getSelection();
    actions.currentIndex = -1;
    actions.key = { 38: 'prev', 40: 'next' };
    actions.next = function() {
      return actions[actions.currentIndex = Math.mod(++actions.currentIndex, actions.length)];
    };
    actions.prev = function() {
      return actions[actions.currentIndex = Math.mod(--actions.currentIndex, actions.length)];
    };
    document.addEventListener('selectstart', function(event) {
      actions.currentIndex = -1;
      // var selection = window.getSelection();
      return false;
    });
    document.addEventListener('keyup', function(event) {
      event.preventDefault();
      if(!selection) return;
      switch(event.keyCode) {
        case 38: case 40:
        var string = selection.toString();
        if (selection.rangeCount) {
          var range = selection.getRangeAt(0);
          range.deleteContents();
          range.insertNode(document.createTextNode(string[actions[actions.key[event.keyCode]]()]()));
          selection.addRange(range);
        }
      }
      return false;
    });
  })();
    </script>
  </body>
</html>

рони · #6 (**permalink**) 30.06.2015, 22:22

Malleys,
строка 28 зачем?

Malleys · #7 (**permalink**) 30.06.2015, 22:31

Сообщение от рони

строка 28 зачем?

На самом деле не нужна. selection уже определено в 17 строке.

Teamur · #8 (**permalink**) 30.06.2015, 22:42

Ну вы даёте, мужики! Мастера!

Какие еще будут предложения? Можно ли этот скрипт минимизировать?

рони · #9 (**permalink**) 30.06.2015, 22:56

на всякий случай скрипт выше разрушает html

Malleys · #10 (**permalink**) 30.06.2015, 22:58

Сообщение от рони

разрушает html

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

inset.innerHTML = inset.innerHTML

Текст опять как одна textNode, но ещё зачем-то 58 пустых

Форум

Справочник

Discord чат

Курсы javascript