I created a Blazor fiddle for easier understanding.
On the left hand side, you see, what I have: There is an <input>, two <span>s that display values that depend on the <input> and a third <span> that displays the sum. The <span>s are editable but when I edit the values, the sum is not updated.
In the middle, you see, what I want: I changed two <span>s to <textarea>s and bound their contents to the properties Number3 and Number4. This enables me to have an updated sum not only when the <input> is changed but also when I enter a number in one of the <textarea>s.
These bindings work well with <textarea>s but not with <span>s. But I'd like to use <span>s, because no formatting is necessary (e. g. width and height) and depending on other conditions, the content should be editable or not. I realized this with contenteditable="@(UserIsLoggedIn ? "true" : "false")".
On the right hand side, I tried <span>s but a simple @bind="Number5" produces an error during run time because it is interpreted as attribute and the error is
Failed to execute 'setAttribute' on 'Element': '@bind' is not a valid attribute name.
So I tried @bind-value="Number5" @bind-value:event="oninput" but this only creates an attribute named value. In the dev tools I see, there is a <span value="2"></span> with size 0x0, because it is empty.
Is it possible to bind properties to <span>s just like I bound them to the <textarea>s? If not, can I make a textarea look like and behave (contenteditable="false") like a span?