We Keep Coding

How to modify input while typing and make Blazor see the changes

I have an input element. I added some filtering and modifying the text while typing using JavaScript keydown and keypress events.
For example - when an input accepts upper case characters, when you press just "a" (no shift, no caps lock), you get "A".
This works, however input value binding doesn't work at all. I just call preventDefault() on the JS event and that's it, binding is broken.
I tried to dispatch the event myself. I dispatched newly created KeyboardEvent and CustomEvent with type "change". Nothing works. I can modify input value in JS event handler, I see the changes in browser, however my C# doesn't.
How can I make this work? Do I have to invoke C# manually to update the binding, or is there another way?
The code should work just on latest Chrome / Firefox browsers, older browsers may be unsupported.

Why don't you do in in Blazor code? In you markdown:
<input type="text" #bind-value="MyParamenter" #bind-value:event="oninput" >
and in code
private string myParameter;
private string MyParameter
{
get => myParameter;
set
{
myParameter = value.ToUpper();
}
}

Maybe, this answers your question. In, short, when you want to handle the TextChanged event you could do something like this:
<MudTextField Label="Some Label Text"
T="string"
Value="person.FirstName"
ValueChanged="(value) => person.FirstName = value.ToUpper()"
Immediate="true" />
The "trick" is to split the #bind-value in two: Value and ValueChanged. Then in the ValueChanged you can do whatever you want with the power of C#.
Note that Blazor abstract the JS side from us, with some experience, I learned to stay away from JS side as much as possible when developing with Blazor and it saved me from a lot of headaches.

Setting a Form Input Value With IE9 (Getting An Error - Unable to set value of the property 'value': object is null or undefined)

My PHP code looks as such:
<a id='next_page' HREF='#' onclick=\"javascript:document.getElementById('page_to_show').value='" . ($page + 1) . "'; return false;\" rel='facebox'>[Next $display_per_page]</a>
As you can see, I am using document.getElementById('page_to_show').value to set the value of the hidden field "page_to_show". I have also tried setting the value of a regular text input field, and I've encountered the same error. I've also tried .Value instead of .value - no luck. This code works in IE8 and FF 3.6.17. Why not IE9? It is sound code, correct? Thank you!
Oh, I've also tried jQuery's method of $("#page_to_show").val("Page Num"); and although it hasn't thrown a Javascript error,it doesn't change anything.
I've also tried a temp fix of adding "" however that didn't work either!

Here's something weird for ya. It wasn't the code. That error was from earlier code, not my updated code. For whatever reason, IE9 isn't refreshing my PHP code! Even if I shift-click refresh, it doesn't refresh my code. I had to exit the browser and open it again for it to refresh. Perhaps thats a setting. Thank you guys! That explains why it was so weird that it wasn't working!

Are you certain that your input has an id and not just a name attribute?
Additionally, I've seen IE get sticky when trying to set the value of input fields that exist outside of a <form>.

Setting the "type" attribute of an input does not work with jQuery attr() method

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.
Code for the form:
form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);
Code for the buttons:
form.append(
$(document.createElement('div')).
attr('class', classesHash.buttonsContainer).
append(
$(document.createElement('button')).
attr('type', 'submit').
addClass(classesHash.submitButton).
attr('title', i18n('Filter')).
attr('value', i18n('Filter')).
append(i18n('Filter'))
).
append(
$(document.createElement('button')).
attr('type', 'button').
addClass(classesHash.addButton).
attr('title', i18n('Add filter')).
attr('value', i18n('Add filter')).
append(i18n('Add filter')).
click(addFilter)
)
);
I made a more simple test with this HTML code:
<form action="" method="get"><button id="test">test</button></form>
When Chrome doesn't finds a submit button, any button submits the form.
The following doesn't works, the form gets submitted on button click:
$('#test').attr('type', 'button');
The following does works, the form does not submit on button click:
document.getElementById('test').setAttribute('type', 'button');
The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.

First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!
The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.
If you look in your console you'll see this:
Error: Uncaught type property can't be changed
Here's a quick test showing this, check the console to see the error jQuery throws.

Use prop instead of attr. It`ll work for sure.
Please look at the below sample code:
$("input[name='email']").focusin(function() {
console.log("alert");
$('#email').prop('type','number');
});
Let me know your thoughts on this.
Thanks

jQuery is working fine for me in Chrome ... all the functions I've thrown at it today are running just fine, including .attr()...

I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault?
$("#test").click(function(e) {
e.preventDefault();
//more work here....
});
EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?

So this post was helpful to me, but my solution was to clone the button in question and replace it
$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();

Setting field focus after javascript alert not working in MS CRM

I have the following code in the OnChange() event for a field.
alert("alert text");
crmForm.all.fieldname.SetFocus();
The page acts like the SetFocus call isn't even there.
Anyone know why this is?
EDIT: I've also tried the following to no avail.
crmForm.all.fieldname.Focus();
crmForm.all.fieldname.focus();
alert("alert text", function() { crmForm.all.fieldname.SetFocus()});

In the DOM, the function to set focus on an element is called focus(), not SetFocus().

Turns out that retaining focus on the field from which the OnChange() method was called is broken in CRM 4 without the most recent rollup. This is a known issue with a Microsoft KB article.
To achieve the illusion of retaining focus on the field simply set the focus to a different field on the same tab first and then reassign the focus to the field from which the OnChange() event was called like so:
alert("alert text");
crmForm.all.some_other_field_on_the_same_tab.SetFocus();
crmForm.all.fieldname.SetFocus();

Seems like the same problem exists in CRM 2011 - event when working with Xrm.Page.
The workaround is still working:
Xrm.Page.getControl("name").setFocus(true);
Xrm.Page.getControl("TheFieldYouReallyWantToFocus").setFocus(true);

Cannot get Javascript function to fire from a textbox in a gridview

I have a textbox in the ItemTemplate of a Gridview. On the _RowDataBound event I add an attribute to the textbox like so:
TextBox txtQuantity = (TextBox)e.Row.FindControl("txtQuantity");
txtQuantity.Attributes.Add("onkeypress", "CheckInputForNumeric(event)");
And it simply will not fire a JS function.
I've tried doing onClick, onBlur, onKeyPress... even tried changing the case to: onclick, onblur, onkeypress... nothing seems to be able to fire my JS function.
elsewhere on that same page I have:
txtAddMarkup.Attributes.Add("onkeypress", "CheckInputForNumeric(event)");
(that textbox is not in a gridview)
and this works just fine.
I'm totally stuck and frustrated at this point because it seems no matter what I do, I cannot get this textbox to fire a JavaScript function

Please run your project and look at the name of the textbox generated by viewing the source in the broswer (IE, Firefox, Safari, whatever). You'll likely see that the name of the textbox has changed. Thanks, ASP.
You can't use the DOM to access the elements by name because they're renamed for you.

For some reason, deleting temporary internet files and reloading the page wasn't getting the newest .js. I had to unload the project and re-build it. Which is weird because I've never had to do that before for other controls
thanks for your inputs!

try this one:
TextBox txtQuantity = (TextBox)e.Row.FindControl("txtQuantity");
txtQuantity.Attributes.Add("onkeypress", "CheckInputForNumeric(event)");
txtQuantity.Attributes["onkeypress"] =
string.Format("javascript:CheckInputForNumeric(this,'{0}','{1}','{2}');", argument1, argument2, argument3);
Or Simply
txtQuantity.Attributes["onkeypress"] =
string.Format("javascript:CheckInputForNumeric (this);");