我以前习惯使用AngularJS框架我遇到了使用VanillaJS的障碍,看起来非常简单,但是当我上网时我才发现过时的做法。
首先,我需要能够基本上拥有一个<textarea>
元素,并将其更改立即传播到JS到HTML。例如(在JS伪代码中):
<textarea id="#editor" when-changed="foo(newValue)"></textarea>
<p id="#parsedEditor"></p>
function foo(newValue) {
document.getElementByID("#parsedEditor") = bar(newValue);
}
function bar(text) {
return text.replace(" ", "x");
}
我想要的是每当textarea
的值发生变化时,它会通过某个过滤器传递,然后呈现给前端。
在这种情况下,只要#editor
的值发生更改,其新值就会发送到回调函数foo
,并使用bar
过滤器和{{1}进行解析使用新值更新。在AngularJS中,它基本上是(忽略确切的语法和最佳实践):
#parsedEditor
我在网上搜索了执行此操作的方法,并发现 <textarea ng-model="text"></textarea>
<p ng-bind-html="parsedText"></p>
function controller($scope) {
$scope.$watch('text', function(newValue, oldValue) {
$scope.parsedText = newValue.replace(" ", "x");
}
}
只是一种新的方法,而Object.observe()
则不建议在MDN上使用。此外,.watch()
属性仅在取消选择onchange
元素后才调用回调函数,并且我希望每当值更改而不取消选择时传播它。
我觉得在JS中必须有一种更简单的方法可以解决这个问题吗?
答案 0 :(得分:1)
以下是基于我上述评论的工作代码:
<textarea id="#editor" oninput="foo(event.currentTarget.value)"></textarea>
<p id="#parsedEditor"></p>
我假设您的意图是用x替换所有空格。如果是这样,您可能需要正则表达式:
function foo(newValue) {
document.getElementById("#parsedEditor").innerText = bar(newValue);
}
function bar(text) {
return text.replace(/\s/gi, "x");
}
您需要在所有目标浏览器中进行测试,并记住HTML5 api在IE9中始终无法正常工作:http://caniuse.com/#search=input