Click here to Skip to main content
15,301,414 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
To display text where each word is selectable. Which Html element is recommended to surround each word. I would like it to be visible to the user and underline when selected.

What I have tried:

This doesn't didn't reference to my call of the C# public void.
<span id="1" onclick="my_function()"> word here </span>


I would like the onclick to work, but still look like regular text.
<asp:linkbutton runat="server" OnClick="my_function"> word here </asp:linkbutton>


Looking for something like...
<asp:span id="1" onclick="my_c#_function"> word here </asp:span>
Posted
Updated 19-Oct-21 11:07am

1 solution

I don't know about "best practice" in this use case; however - depending on the number of words involved - you may find the overheads of setting up many separate controls are excessive... if only in terms of page size.

I'd probably approach this by wrapping each word in a simple tag, no need for any additional attributes. On page load, run a simple script (using JQuery in this example)
JavaScript
$('#parentelement span').click(function() {
    $('#hiddenfield').val($(this).text());
    $('#hiddenbutton').click();
});
where #hiddenfield is just that, and #hiddenbutton is a standard button but styled to be display:none. Your server event simply checks the value passed back in the hidden field to identify which word has been clicked. Use CSS to style each span on mouseover / mousedown.
CSS
#parentelement span:hover {
   text-decoration:underline;
}
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900