Я пытаюсь получить простую пишущую машинку 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>
whitespace
- буквальная строка \n
("\\n"
, два символа), а не строка. Вам нужно будет добавить фактический пробел (если это появляется из-за CSS white-space: pre-wrap
) или использовать элемент <br/>
или создать новый абзац.
Как указывалось другими ответами, новые строки в пробеле игнорируются по умолчанию в html.
Вот пример jsFiddle вашего примера, измененный для замены \n
на <br/>
для создания новой строки (в вызове метода вы должны использовать только single \
, так что \n
распознается как новая строка, если вы используете \\n
, тогда вы избегаете обратную косую черту, чтобы просто обратная косая черта).
Другим вариантом будет CSS-стиль для вывода с white-space: pre-wrap;
как показано в этом jsFiddle.
Поскольку вы добавляете непосредственно к 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);
}