Я просто столкнулся с ситуацией, в которой было бы элегантным решением иметь только части текстовой области (ранее загруженные текстом), которые можно было бы редактировать, а другие части не были (так сказать, "greyed out" ).
Возможно ли это вообще, используя javascript вообще?
Я бы использовал jQuery.
Вы можете сделать это (просто набросанная идея, без кода):
Создайте регулярное выражение, соответствующее всему тексту. Используйте фиксированные строки для немодифицируемых частей и используйте [\s\S]*? для изменяемых частей. Используйте ^ и $ для привязки вашего регулярного выражения.
/^This is fixed text\. Now something editable:[\s\S]*?Now fixed again\.$/
Теперь отреагируйте на событие keyup и, возможно, на другие события (например, paste).
При каждом соответствующем событии сделайте проверку, если регулярное выражение все еще совпадает.
Если это не так, отмените событие.
Фактически это должно прекратить модификации частей, которые являются буквальными в регулярном выражении и, таким образом, делают определенные части вашего текста доступными только для чтения.
Не забудьте проверить строку на стороне сервера, а также после сообщения формы - никогда не верьте, что клиент не может отправить недопустимые значения.
ИЗМЕНИТЬ
Вы можете использовать функцию кавычки регулярных выражений для динамической сборки этого регулярного выражения из строк, это должно сэкономить вам много хлопот.
function regexQuote(s) { return s.replace(/[\[\]^$*+?{}.|\\]/g, "\\$&") }
Использование
var re = new Regex(
"^" +
[regexQuote(fixedPart1), regexQuote(fixedPart2)].join("[\\s\\S].*?")
+ "$"
);
Если вы используете простой элемент textarea, вы не сможете создать необходимый контент (на основе того, доступен ли этот контент для редактирования). В лучшем случае вы сможете проверить, находится ли контент, который ваш пользователь пытается изменить, либо в черном списке, либо в белом списке, а затем остановить редактирование или нет. Вы также можете представить некоторую визуальную обратную связь, как предупреждение, в котором говорится: "Вы не можете этого сделать".
Моя рекомендация заключалась бы в том, чтобы воспользоваться атрибутом contenteditable, что может занять немного больше времени на стиль, но позволит вам много большая гибкость в долгосрочной перспективе.
Вы могли бы создать элемент div, чтобы он выглядел так же, как и требуемое текстовое поле, а затем используйте редактируемые промежутки в нем, чтобы установить, можно ли отредактировать конкретный блок текста. Затем вы можете использовать команды JavaScript (см. Ссылку выше) или использовать кнопку "Сохранить" для извлечения этого содержимого, установить его как значение для вашего фактического текстового поля (которое вы могли бы скрыть) и опубликовать свою страницу как обычно.
В качестве примерного примера используйте следующий код.
<div id="editable-content">
<span id="block1" class="editable" contenteditable="true">This is some editable content which will </span>
<span id="block2" class="non-editable">quickly be followed by some non-editable content</span>
</div>
<div style="display: none;">
<textarea id="PostedContent"></textarea>
</div>
<div>
<input id="save-page" type="submit" value="Save Page" />
</div>
<script type="text/javascript">
$(function () {
$('#save-page').click(function () {
$('#PostedContent').val($('#editable-content').text());
});
});
</script>
Хорошо, вы могли бы сделать что-то вроде этого. Этот код очень неэффективен, я просто пытаюсь описать концепцию.
JS:
$(function () {
var tb = $("#t").get(0);
$("#t").keydown(function (event) {
var start = tb.selectionStart;
var end = tb.selectionEnd;
var reg = new RegExp("(@{.+?})", "g");
var amatch = null;
while ((amatch = reg.exec(tb.value)) != null) {
var thisMatchStart = amatch.index;
var thisMatchEnd = amatch.index + amatch[0].length;
if (start <= thisMatchStart && end > thisMatchStart) {
event.preventDefault();
return false;
}
else if (start > thisMatchStart && start < thisMatchEnd) {
event.preventDefault();
return false;
}
}
});
});
HTML
<textarea id="t" rows=5 cols="80">Hello this is a test @{stuff}
this part is editable @{other stuff}
</textarea>
Это использует вашу идею "маркеров". Общая идея состоит в том, чтобы сказать "ok", это диапазон текста, который пользователь пытается редактировать внутри одного из наших маркеров? Очевидно, что при использовании регулярного выражения каждый раз, когда нажата клавиша, это не лучший способ определить это, я не игнорирую клавиши со стрелками и т.д. И т.д., Но это дает вам общую идею.
Интересная идея, но, к сожалению, текст в текстовой области должен обрабатываться равномерно, т.е. вы не можете отключить подраздел содержимого текстовой области.
У вас есть варианты. Если вы можете идентифицировать текст, который необходимо отключить, вы можете добавить его как элемент DOM (т.е. Div), а затем поместить его таким образом, чтобы он находился внутри текстовой области.
Вы можете подразумевать, что этот div находится внутри текстовой области, либо делая большую текстовую область, и используя позицию: относительные/абсолютные стили для перемещения div по текстовой области. Или вы можете удалить границу в текстовой области и поместить ее в контейнер, который также содержит текст div с отключенным текстом.
Я бы предложил вместо того, чтобы пытаться сломать содержимое input в подстроки редактируемого/нередактируемого контента, вы используете атрибут contentEditable элемента HTML и используете JavaScript для передачи этого отредактированное значение в скрытом input в другом месте страницы.
В родительском элементе вы можете установить границу 1px сплошной серый, а затем внутри этого, поставьте
1) textarea (изменить css, чтобы не иметь границы) 2) ярлык (также нет границы)
В этом случае это будет выглядеть так, как если бы оба текста внутри 1) и 2) были вместе, поскольку они помещены в одну ячейку. 1) Возможно редактирование, хотя в то время как другое выделено серым цветом.
Я бы предложил два текстовых поля один только для чтения и другой редактируемый, перекрывающий, поэтому он выглядит как единственный
После поиска очень трудно сделать текстовую область частично редактируемой.
Вот мой код, который я использовал для этого требования
input
{
width:100%;
border:0px solid;
outline:none
}
<!DOCTYPE html>
<html>
<div style="padding: 2px;border:1px solid #ccc;width: 82%;max-height:100px;min-height: 51px;overflow:auto;outline: none;resize: both;" contenteditable="true" unselectable="on">
<input placeholder="enter prefix..." value="editable postfix..." ></input>
<div id='unEditable' style="background-color:yellow;width: fit-content;padding-left:10px;padding-right:10px;border-radius:10px;height: fit-content;" contenteditable="false" unselectable="off" onkeyup="" >
fixed content non-editable
</div>
<input placeholder="enter postfix..." value="editable prefix..." style='width:97%'></input>
</div>
</html>