Как я могу заставить пишущую машинку Jquery / Javascript распознавать пробельные символы?

Question

Как я могу заставить пишущую машинку Jquery / Javascript распознавать пробельные символы?

0

Я пытаюсь получить простую пишущую машинку jquery, чтобы распознавать пробельные символы, такие как \n и\r, чтобы в результате текста на самом деле были разрывы строк. Когда я пытаюсь получить структуру управления, чтобы распознать "\", ничего не запускается... Любая помощь оценивается!

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    var text = "runtype";
    var count = 0;
    var maxspeed = 200;

    $(document).ready(function() {

      function typeit(userInput) {
        text = userInput;
        type();
      }

      function character(start, end, text) {
        return text.substring(start, end);
      }

      function type(){

        var random = Math.floor(Math.random() * maxspeed);
        var char1 = character(count, count+1, text);
        var char2 = character(count+1, count+2, text);
        var whitespace = char1+char2;

        if (char1 === '\\'){
          $('#box').append(whitespace);
          setTimeout(type, 20);
        } else if (char1 === ' '){
          $('#box').append(char1);
          setTimeout(type, 20);
        }else if (char1 === '@'){
          ;
          setTimeout(type, 300);
        } else {
          $('#box').append(char1);
          setTimeout(type, random);
        }

        count++;

    }

    typeit('runtype and \\nruntype and runtype');
    });

</script>

</head>
<body>
<div id="box"></div>

</body>
</html>

tremstat 23 сен. 2013, в 18:33

Источник

Теги:

javascript

jquery

3 ответа

1

Как указывалось другими ответами, новые строки в пробеле игнорируются по умолчанию в html.

Вот пример jsFiddle вашего примера, измененный для замены \n на <br/> для создания новой строки (в вызове метода вы должны использовать только single \, так что \n распознается как новая строка, если вы используете \\n, тогда вы избегаете обратную косую черту, чтобы просто обратная косая черта).

Другим вариантом будет CSS-стиль для вывода с white-space: pre-wrap; как показано в этом jsFiddle.

Michal 23 сен. 2013, в 14:59

1

Поскольку вы добавляете непосредственно к DOM, пробелы не будут иметь никакого эффекта (кроме добавления одного пробела). Вместо этого вам нужно добавить элемент, чтобы заставить новую строку. В этом примере я использовал тег br когда во входной строке встречается \n:

if (char1 === '\\') {
    if (char2 === 'n') {
        $('#box').append('<br />');
        count++; // to cover the second character of the chord
    }
    /*
    if (char2 === 'something else') {
        More logic for other chords. 
        Could possibly changed to a switch if you've got lots of options.
    }
    */
    setTimeout(type, 20);
}

Пример скрипки

Rory McCrossan 23 сен. 2013, в 14:12

Ещё вопросы

Bergi · Accepted Answer · 2013-09-23T14-56-00.000Z

whitespace - буквальная строка \n ("\\n", два символа), а не строка. Вам нужно будет добавить фактический пробел (если это появляется из-за CSS white-space: pre-wrap) или использовать элемент <br/> или создать новый абзац.