Я пытаюсь использовать преобразователь значений aurelia для анализа значений, введенных пользователем, путем удаления всех недопустимых символов, введенных в поле ввода, и отображения проанализированного текста. Но есть несколько крайних случаев, когда я не могу отобразить проанализированный текст пользователю, вместо этого отображается введенный текст с недопустимыми символами. На самом деле введенный текст фактически анализируется, поэтому мне интересно, что можно изменить, чтобы показать проанализированный текст.
Я попытался включить два оператора replace regex, и, похоже, это ничего не исправило.
преобразователь значений clean-string.ts:
export class CleanStringValueConverter {
fromView(val) {
val = val
.replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
.replace(/([^a-z 0-9]+)/gi, "")
.trim();
console.info(val);
return val;
}
}
приложение.html:
<template>
<require from = "./clean-string"></require>
<h3>Enter text with illegal charaters</h3>
<input type = "text" value.bind = "dirtyString | cleanString" />
</template>
app.ts:
export class DCString{
dirtyString: string;
}
Например: Я набираю «случайный ####» Я ожидаю, что «случайный» будет отображаться в поле ввода при вводе последнего символа, потому что я анализирую недопустимые символы.
Но я просто вижу «random####» в текстовом поле, если только я не ввожу дополнительный символ, который затем запускает синтаксический анализ.
Так есть ли способ решить эту проблему? Какие изменения мне нужно будет внести, чтобы это работало? Заранее спасибо за ваш вклад!!
Вот фрагмент происходящего:
Из консоли мы видим, что на самом деле введенный текст анализируется, как мне нужно, но он НЕ отображается как проанализированный текст в поле ввода, даже если это значение привязано к вводу.
Ниже приведена ссылка на коды и поле для приведенного выше кода: ссылка на песочницу
Обновлять:
Я попробовал одно из предложений из комментариев, используя событие нажатия клавиши. Это работает как шарм, пока вы не вставите строку со всеми недопустимыми символами. Есть ли способ обойти это?
🤔 А знаете ли вы, что...
JavaScript можно использовать для манипуляции DOM (Document Object Model), что позволяет изменять содержимое и структуру веб-страницы.
Я чувствую, что это то, что я искал, и я чувствую, что нашел решение. Мне пришлось использовать концепцию преобразователя значений, события нажатия клавиши и правила привязки updateTrigger, чтобы это работало без особых хлопот. Дайте мне знать, если вы найдете лучшее решение :)
Большое спасибо за все ваши материалы до сих пор :)
Вот что я сделал:
app.html
<template>
<require from = "./clean-string"></require>
<h3>Enter text with illegal charaters</h3>
<input
type = "text"
value.bind = "dirtyString | cleanString & updateTrigger:'blur'"
keypress.delegate = "keypress($event)"
/>
<p>${dirtyString}</p>
</template>
чистая строка.ts
export class CleanStringValueConverter {
fromView(val) {
val = val
.replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
.replace(/([^a-z 0-9]+)/gi, "")
.trim();
return val;
}
toView(dirtyString) {
dirtyString = dirtyString
.replace(/([|!/&*:;$%@#`'_"^<>()+-.,\\])+/g, "")
.replace(/([^a-z 0-9]+)/gi, "")
.trim();
return dirtyString;
}
}
app.ts
export class Color {
dirtyString = "";
keypress(event) {
return /([a-z 0-9]+)/gi.test(event.key);
// return !/[|!/&*:;$%@#`'_"^<>()+-.,\\]/.test(event.key);
}
}
Также обсуждение можно найти на сайте aurelia: ссылка на обсуждение