I’m having an issue binding text to a textarea
when the text contains a CR
+ LF
. The text displays correctly, but, when I edit the text (e.g. just add a character at the end), it appears that the binding engine somehow strips the CR
out of the middle of the text.
export class Tester {
private origValue : string = "a \r\n b"
private editValue : string = this.origValue;
private origChars : string = ""
private editChars: string = ""
activate() {
this.computeChars();
}
public computeChars(){
this.origChars = this.editChars = ""
for(let x = 0; x < this.origValue.length; x++){
this.origChars += `${this.origValue.charCodeAt(x)} `
}
for(let x = 0; x < this.editValue.length; x++) {
this.editChars += `${this.editValue.charCodeAt(x)} `
}
}
}
<template>
<div style="color: green">${origChars}</div>
<div style="color: red">${editChars}</div>
<textarea rows="4" value.bind="editValue" change.delegate="computeChars()" />
<div if.bind="origChars != editChars">Text has been edited</div>
</template>
When I run this code, I see this:
Note the 13 10
in the middle.
Now if I click in the textarea
and add a space at the end of the text (after the b) and tab out of the textarea
, I see this:
Note the characters of the original line (green) still has 13 10
but the characters of the edited line (where I ONLY added a space at the end) is now missing the 13
.
If I place my cursor back in the textarea
at the end of the text and remove the character I added, you would expect the Text has been edited
message to disappear, but it doesn’t because the CR
was somehow removed.
Is the Aurelia binding engine somehow stripping out my CR
?