1

We have a unique situation in this app that requires users to be able to edit and also click a live link.

A common use case might be:

  • Field asking for URL
  • I enter URL
  • Someone else sees this and clicks URL or needs to edit URL
  • Form is submitted

Originally I was thinking the text field had a save/edit button next to it but this seems clunky, as the field can be for any basic text as well. Any thoughts?

1

You can separate the raw text from the rendered value, similar to how StackExchange sites handle this same exact situation:

Example of raw versus rendered views

This enables me to edit the raw value of the text as I see fit, but also provides a rendered, functional link that I can click if I'd like.

1

Maxathousand's answer was a good one. If it helps, here are some alternate ways that work for fields that accept more than one URL, which could also be adapted for your use case.

Google Docs

  • URLs are auto-detected and then formatted as links on space/enter.
  • When the cursor is on the link, additional options are shown, one of which is a way to actually visit the link.

Google Docs link edit


Microsoft Word

  • URLs are auto-detected and then formatted as links on space/enter.
  • A tooltip shows an instruction to Ctrl+Click the link to visit it when the cursor is on it.
  • This obviously doesn't work for devices without a dedicated keyboard. They use another method for their mobile apps...

Microsoft Outlook Mobile

  • When text is highlighted, the app detects a URL and provides a 'Browser' option to follow the link.
  • To actually create a link, on highlight theres an option to 'Add link'.

Outlook Android link edit

Hope that gives you some ideas.

0

You can use the approach that JIRA uses for each field expect every field in JIRA on focus starts editing but it also has an edit next to each field. In your case the second person viewing can click on the link to visit it and if they wish to edit click on the edit link which lets them edit the link in the same space. Can provide a screenshot if required?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.