How can 'onblur' and similar events be supported?

asp.net-core blazor c#

Question

I want to do something like:

<td contenteditable=true @onblur(async (txt) => { ... })>

but currently it seems only @onchange is supported, and doesn't actually fire when contenteditable content is changed. I suppose the method would be to have a JS handler that calls the C# handler, but I don't know if communication can go this way. Is the best option now just to have a button that has an onclick handler of 'save to DB'? Or is there a better option available?

Accepted Answer

You are correct, the current version of Blazor doesn't support the onblur event. Only the onclick, onchange and onkeypress events are supported. I believe this pull request should allow access to more events and should be in the 0.2.0 release.

You can call C# methods from JavaScript if you wanted to go this route. See this blog post for an example. But it might be worth waiting for the 0.2.0 release as it should be out in the next week.


Popular Answer

Felt the need to build a cheatsheet of available events in Blazor....Seems relevant to leave here as onblur is added.


Focus events (UIFocusEventArgs)

onfocus        
onblur
onfocusin
onfocusout

Mouse events (UIMouseEventArgs)

onmouseover          
onmouseout    
onmousemove   
onmousedown   
onmouseup     
onclick       
ondblclick    
oncontextmenu 

https://github.com/aspnet/Blazor/blob/master/test/testapps/BasicTestApp/MouseEventComponent.cshtml

Mouse wheel events (UIWheelEventArgs)

onwheel       
onmousewheel  

Drag events (UIDragEventArgs)

ondrag      
ondragend   
ondragenter 
ondragleave 
ondragover  
ondragstart 
ondrop      

Keyboard events (UIKeyboardEventArgs)

onkeydown    
onkeyup      
onkeypress   

https://github.com/aspnet/Blazor/blob/master/test/testapps/BasicTestApp/KeyPressEventComponent.cshtml

Input events (UIEventArgs)

oninput        
oninvalid       
onreset       
onselect        
onselectstart   
onselectionchange
onsubmit     

onchange        UIChangeEventArgs

Clipboard (UIClipboardEventArgs)

oncopy
oncut
onpaste

onbeforecopy        UIEventArgs
onbeforecut       
onbeforepaste     

Touch events (UITouchEventArgs)

ontouchcancel
ontouchend 
ontouchmove
ontouchstart
ontouchenter
ontouchleave

https://github.com/aspnet/Blazor/blob/master/test/testapps/BasicTestApp/TouchEventComponent.cshtml

Pointer events (UIPointerEventArgs)

gotpointercapture
lostpointercapture
pointercancel    
pointerdown    
pointerenter    
pointerleave    
pointermove      
pointerout       
pointerover     
pointerup        

Media events (UIEventArgs)

oncanplay      
oncanplaythrough
oncuechange
ondurationchange
onemptied   
onpause       
onplay     
onplaying      
onratechange 
onseeked      
onseeking      
onstalled      
onstop       
onsuspend      
ontimeupdate   
onvolumechange  
onwaiting       

Progress events (UIProgressEventArgs)

onloadstart
ontimeout
onabort
onload
onloadend
onprogress

onerror        (UIErrorEventArgs)

General events (UIEventArgs)

onactivate      
onbeforeactivate   
onbeforedeactivate 
ondeactivate       
onended       
onfullscreenchange 
onfullscreenerror  
onloadeddata       
onloadedmetadata   
onpointerlockchange
onpointerlockerror 
onreadystatechange 
onscroll      


Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow
Licensed under: CC-BY-SA with attribution
Not affiliated with Stack Overflow