Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can 'onblur' and similar events be supported?

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?

like image 733
Rollie Avatar asked Dec 06 '22 12:12

Rollie


1 Answers

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      
like image 146
David Graham Avatar answered Dec 22 '22 08:12

David Graham