Hello
My application currently on a button click adds a piece of text to the end of the text in a textarea box. I would Like for the user to place the cursor where they want to add the text and on the button press it does it. I am assuming that i have to use javascript to make it happen but i am unsure. can you please point me in the right direction?
This is what I've found:
Here is how to execute JavaScript from Blazor:
Thanks for that, I am now able to call a javascript function from c# within blazor
One problem though....I dont seem to be able to use the Radzen controls in order to do this. If i create standard button and textarea it works but it doesnt work with your controls.
Is there a way i can use your controls and call javascript as well?
How do you call it from HTML button and textarea and how from Radzen components that is not working?
Copied below are the three lines from the .razor page in question
<button class="btn btn-warning" @onclick="isnert0Please">Does this fly?</button>
<textarea name="Textarea1" @ref="Textarea0" id="Textarea1" cols="30" rows="3">stuff in here</textarea>
<RadzenButton Disabled="false" Size="ButtonSize.Small" Text="Insert Account Number" Click="@AccountButtonClick">
As you can see from the first line, the @onlcick calls the misspelt function. If i try to put this within either of the radzen controls it throws a compile error either not knowing what @onciick is or if i put the "isnert0Please" within the click event of a radzen button it cannot see it.
Can you post the definition of this method?
public async Task isnert0Please()
{
await _JSRuntime.InvokeVoidAsync("setElementById", Textarea0, " {0}");
}
And the javascript is even simpler (please ignore the hard coded areas and alerts for now)...........
function setElementById(id, text) {
var posn = document.getElementById("Textarea1").selectionStart;
var txt = document.getElementById("Textarea1").innerHTML;
alert(txt.substr(0, posn));
alert(txt.substr(posn));
var newtxt = txt.substr(0, posn) + text + txt.substr(posn);
alert(newtxt);
document.getElementById("Textarea1").innerText= newtxt;
}
Here is the same code with RadzenTextArea and RadzenButton
@inject IJSRuntime JSRuntime
<RadzenTextArea id="Textarea0" />
<RadzenButton Size="ButtonSize.Small" Text="Insert Account Number" Click="@isnert0Please" />
@code {
public async Task isnert0Please()
{
await JSRuntime.InvokeVoidAsync("setElementById", "Textarea0", " {0}");
}
}
...
function setElementById(id, text) {
var posn = document.getElementById(id).selectionStart;
var txt = document.getElementById(id).innerHTML;
alert(txt.substr(0, posn));
alert(txt.substr(posn));
var newtxt = txt.substr(0, posn) + text + txt.substr(posn);
alert(newtxt);
document.getElementById(id).innerText = newtxt;
}
I am so so sorry, I can see now that the radzen textarea doesnt have an id by default whereas i typed it naturally
I think that it is time to step away from the keyboard.
No worries! Have a great weekend!
Before you go, were you able to read the text within the textarea? I am getting the position now which is good but i am not getting or setting the text within the textarea
Here is an example with the code I've posted in my first reply:
@page "/textarea"
@inject IJSRuntime JSRuntime
<RadzenTextArea id="Textarea0" />
<RadzenButton Size="ButtonSize.Small" Text="Insert Account Number" Click="@isnert0Please" />
@code {
public async Task isnert0Please()
{
await JSRuntime.InvokeVoidAsync("insertAtCursor", "Textarea0", "Something to insert");
}
}
...
function insertAtCursor(id, myValue) {
var myField = document.getElementById(id);
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA and others
else if (myField.selectionStart || myField.selectionStart == '0') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos)
+ myValue
+ myField.value.substring(endPos, myField.value.length);
} else {
myField.value += myValue;
}
}
Instead of debugging I will (re)use that code instead. Thanks again for your help