76

When I create a text view:

Text("Hello World")

I can't allow the user to select text when they long press.

I've looked at using a TextField but that doesn't seem to allow for turning off text editing.

I just want to be able to display a body of text and allow the user to highlight a selection using the system text selector.

Thanks!

2
  • 2
    any update on this?
    – pregmatch
    Dec 23, 2019 at 23:02
  • 1
    I too would be interested in this.
    – Ken
    Jan 4, 2020 at 16:57

4 Answers 4

101
+50

iOS 15.0+, macOS 12.0+, Mac Catalyst 15.0+

As of Xcode 13.0 beta 2 you can use

Text("Selectable text")
    .textSelection(.enabled)
Text("Non selectable text")
    .textSelection(.disabled)

// applying `textSelection` to a container
// enables text selection for all `Text` views inside it
VStack {
    Text("Selectable text1")
    Text("Selectable text2")
    // disable selection only for this `Text` view
    Text("Non selectable text")
        .textSelection(.disabled)
}.textSelection(.enabled)

See also the textSelection Documentation.

iOS 14 and lower

Using TextField("", text: .constant("Some text")) has two problems:

  • Minor: The cursor shows up when selecting
  • Mayor: When a user selects some text he can tap in the context menu cut, paste and other items which can change the text regardless of using .constant(...)

My solution to this problem involves subclassing UITextField and using UIViewRepresentable to bridge between UIKit and SwiftUI.

At the end I provide the full code to copy and paste into a playground in Xcode 11.3 on macOS 10.14

Subclassing the UITextField:

/// This subclass is needed since we want to customize the cursor and the context menu
class CustomUITextField: UITextField, UITextFieldDelegate {
    
    /// (Not used for this workaround, see below for the full code) Binding from the `CustomTextField` so changes of the text can be observed by `SwiftUI`
    fileprivate var _textBinding: Binding<String>!
    
    /// If it is `true` the text field behaves normally.
    /// If it is `false` the text cannot be modified only selected, copied and so on.
    fileprivate var _isEditable = true {
        didSet {
            // set the input view so the keyboard does not show up if it is edited
            self.inputView = self._isEditable ? nil : UIView()
            // do not show autocorrection if it is not editable
            self.autocorrectionType = self._isEditable ? .default : .no
        }
    }
    
    
    // change the cursor to have zero size
    override func caretRect(for position: UITextPosition) -> CGRect {
        return self._isEditable ? super.caretRect(for: position) : .zero
    }
    
    // override this method to customize the displayed items of 'UIMenuController' (the context menu when selecting text)
    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
    
        // disable 'cut', 'delete', 'paste','_promptForReplace:'
        // if it is not editable
        if (!_isEditable) {
            switch action {
            case #selector(cut(_:)),
                 #selector(delete(_:)),
                 #selector(paste(_:)):
                return false
            default:
                // do not show 'Replace...' which can also replace text
                // Note: This selector is private and may change
                if (action == Selector("_promptForReplace:")) {
                    return false
                }
            }
        }
        return super.canPerformAction(action, withSender: sender)
    }
    
    
    // === UITextFieldDelegate methods
    
    func textFieldDidChangeSelection(_ textField: UITextField) {
        // update the text of the binding
        self._textBinding.wrappedValue = textField.text ?? ""
    }
    
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // Allow changing the text depending on `self._isEditable`
        return self._isEditable
    }
    
}

Using UIViewRepresentable to implement SelectableText

struct SelectableText: UIViewRepresentable {
    
    private var text: String
    private var selectable: Bool
    
    init(_ text: String, selectable: Bool = true) {
        self.text = text
        self.selectable = selectable
    }
    
    func makeUIView(context: Context) -> CustomUITextField {
        let textField = CustomUITextField(frame: .zero)
        textField.delegate = textField
        textField.text = self.text
        textField.setContentHuggingPriority(.defaultHigh, for: .vertical)
        textField.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        return textField
    }
    
    func updateUIView(_ uiView: CustomUITextField, context: Context) {
        uiView.text = self.text
        uiView._textBinding = .constant(self.text)
        uiView._isEditable = false
        uiView.isEnabled = self.selectable
    }
    
    func selectable(_ selectable: Bool) -> SelectableText {
        return SelectableText(self.text, selectable: selectable)
    }
    
}

The full code

In the full code below I also implemented a CustomTextField where editing can be turned off but still be selectable.

Playground view

Selection of text

Selection of text with context menu

Code

import PlaygroundSupport
import SwiftUI


/// This subclass is needed since we want to customize the cursor and the context menu
class CustomUITextField: UITextField, UITextFieldDelegate {
    
    /// Binding from the `CustomTextField` so changes of the text can be observed by `SwiftUI`
    fileprivate var _textBinding: Binding<String>!
    
    /// If it is `true` the text field behaves normally.
    /// If it is `false` the text cannot be modified only selected, copied and so on.
    fileprivate var _isEditable = true {
        didSet {
            // set the input view so the keyboard does not show up if it is edited
            self.inputView = self._isEditable ? nil : UIView()
            // do not show autocorrection if it is not editable
            self.autocorrectionType = self._isEditable ? .default : .no
        }
    }
    
    
    // change the cursor to have zero size
    override func caretRect(for position: UITextPosition) -> CGRect {
        return self._isEditable ? super.caretRect(for: position) : .zero
    }
    
    // override this method to customize the displayed items of 'UIMenuController' (the context menu when selecting text)
    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
    
        // disable 'cut', 'delete', 'paste','_promptForReplace:'
        // if it is not editable
        if (!_isEditable) {
            switch action {
            case #selector(cut(_:)),
                 #selector(delete(_:)),
                 #selector(paste(_:)):
                return false
            default:
                // do not show 'Replace...' which can also replace text
                // Note: This selector is private and may change
                if (action == Selector("_promptForReplace:")) {
                    return false
                }
            }
        }
        return super.canPerformAction(action, withSender: sender)
    }
    
    
    // === UITextFieldDelegate methods
    
    func textFieldDidChangeSelection(_ textField: UITextField) {
        // update the text of the binding
        self._textBinding.wrappedValue = textField.text ?? ""
    }
    
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // Allow changing the text depending on `self._isEditable`
        return self._isEditable
    }
    
}

struct CustomTextField: UIViewRepresentable {
    
    @Binding private var text: String
    private var isEditable: Bool
    
    init(text: Binding<String>, isEditable: Bool = true) {
        self._text = text
        self.isEditable = isEditable
    }
    
    func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> CustomUITextField {
        let textField = CustomUITextField(frame: .zero)
        textField.delegate = textField
        textField.text = self.text
        textField.setContentHuggingPriority(.defaultHigh, for: .vertical)
        return textField
    }
    
    func updateUIView(_ uiView: CustomUITextField, context: UIViewRepresentableContext<CustomTextField>) {
        uiView.text = self.text
        uiView._textBinding = self.$text
        uiView._isEditable = self.isEditable
    }
    
    func isEditable(editable: Bool) -> CustomTextField {
        return CustomTextField(text: self.$text, isEditable: editable)
    }
}

struct SelectableText: UIViewRepresentable {
    
    private var text: String
    private var selectable: Bool
    
    init(_ text: String, selectable: Bool = true) {
        self.text = text
        self.selectable = selectable
    }
    
    func makeUIView(context: Context) -> CustomUITextField {
        let textField = CustomUITextField(frame: .zero)
        textField.delegate = textField
        textField.text = self.text
        textField.setContentHuggingPriority(.defaultHigh, for: .vertical)
        textField.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        return textField
    }
    
    func updateUIView(_ uiView: CustomUITextField, context: Context) {
        uiView.text = self.text
        uiView._textBinding = .constant(self.text)
        uiView._isEditable = false
        uiView.isEnabled = self.selectable
    }
    
    func selectable(_ selectable: Bool) -> SelectableText {
        return SelectableText(self.text, selectable: selectable)
    }
    
}


struct TextTestView: View {
    
    @State private var selectableText = true
    
    var body: some View {
        VStack {
            
            // Even though the text should be constant, it is not because the user can select and e.g. 'cut' the text
            TextField("", text: .constant("Test SwiftUI TextField"))
                .background(Color(red: 0.5, green: 0.5, blue: 1))
            
            // This view behaves like the `SelectableText` however the layout behaves like a `TextField`
            CustomTextField(text: .constant("Test `CustomTextField`"))
                .isEditable(editable: false)
                .background(Color.green)
            
            // A non selectable normal `Text`
            Text("Test SwiftUI `Text`")
                .background(Color.red)
            
            // A selectable `text` where the selection ability can be changed by the button below
            SelectableText("Test `SelectableText` maybe selectable")
                .selectable(self.selectableText)
                .background(Color.orange)
            
            Button(action: {
                self.selectableText.toggle()
            }) {
                Text("`SelectableText` can be selected: \(self.selectableText.description)")
            }
            
            // A selectable `text` which cannot be changed
            SelectableText("Test `SelectableText` always selectable")
                .background(Color.yellow)
            
        }.padding()
    }
    
}

let viewController = UIHostingController(rootView: TextTestView())
viewController.view.frame = CGRect(x: 0, y: 0, width: 400, height: 200)

PlaygroundPage.current.liveView = viewController.view
10
  • 2
    Maybe it would be best to rely on UITextView instead of UITextField, and benefit from its 'isEditable' property. That addresses both issues mentioned. Apr 9, 2020 at 16:23
  • 3
    @Unknown Sorry for the late comment. I added the code to not show the keyboard and autocorrection. You can use textField.inputView = UIView() and textField.autocorrectionType = .no. Regarding the use of UITextView: It is easier to implement some behaviours but it is a UIScrollView. So you have to make some other tradeoffs or workarounds. Currently (May 2020) the SwiftUI standard TextField is just a wrapper around UITextField.
    – Qbyte
    May 2, 2020 at 20:44
  • 1
    Is there an easy way to make the text wrap? Long strings seem to be on one long line rather than to conform to scrollview they should be contained in. Also, any way to utilize the .bold() modifier? Thx! Jul 7, 2020 at 10:18
  • 1
    @Lkabo What do you mean by 'scroll view'? This is a UITextField maybe you want to use UITextView, see stackoverflow.com/questions/56471973/…. Unfortunately you have to write the bold modifier yourself. It also seems to be impossible to set the font form the environment, see workaround: stackoverflow.com/questions/60049927/…
    – Qbyte
    Jul 10, 2020 at 15:50
  • 1
    @aheze no, sorry, I abandoned this mod in my app for the time being. However, I am still interested in implementing it in the future at some point... Jan 25, 2021 at 2:20
31

A simple workaround solution I found is to just use context menus instead:

Text($someText)
.contextMenu(ContextMenu(menuItems: {
  Button("Copy", action: {
    UIPasteboard.general.string = someText
  })
}))

3
  • 1
    This is actually quite clever and nice! Easy and does the job. It can't be helped that SwiftUI is still young and has a lot of features missing, selecting is now possible in iOS 15, but not in 13 & 14.
    – smat88dd
    Jun 27, 2021 at 13:13
  • 1
    UIPasteboard is for iOS/iPadOS, for macOS use: ` NSPasteboard.general.setString(someText, forType: .string)`
    – Sajjon
    Sep 30, 2021 at 12:53
  • 2
    Thanks @Sajjon. You'll also need to declare types for macOS: let pasteboard = NSPasteboard.general; pasteboard.declareTypes([.string], owner: nil); pasteboard.setString(text, forType: .string)
    – Patrick
    Sep 30, 2021 at 16:42
5

I ran into a similar problem, where I wanted in essence to select the text without allowing editing. In my case, I wanted to show the UIMenuController when the text was tapped on, without allowing editing of the text or showing the cursor or keyboard. Building on the prior answers:

import SwiftUI
import UIKit


struct SelectableText: UIViewRepresentable {
    var text: String
    @Binding var isSelected: Bool

    func makeUIView(context: Context) -> SelectableLabel {
        let label = SelectableLabel()
        label.textColor = .white
        label.font = .systemFont(ofSize: 60, weight: .light)
        label.minimumScaleFactor = 0.6
        label.adjustsFontSizeToFitWidth = true
        label.textAlignment = .right
        label.numberOfLines = 1
        label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
        label.text = text
        return label
    }

    func updateUIView(_ uiView: SelectableLabel, context: Context) {
        uiView.text = text
        if isSelected {
            uiView.showMenu()
        } else {
            let _ = uiView.resignFirstResponder()
        }
    }
}

class SelectableLabel: UILabel {
    override var canBecomeFirstResponder: Bool {
        return true
    }

    override init(frame: CGRect) {
        super.init(frame: .zero)
        highlightedTextColor = .gray
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        switch action {
        case #selector(copy(_:)), #selector(paste(_:)), #selector(delete(_:)):
            return true
        default:
            return super.canPerformAction(action, withSender: sender)
        }
    }

    override func copy(_ sender: Any?) {
        UIPasteboard.general.string = self.stringValue
    }

    override func paste(_ sender: Any?) {
        guard let string = UIPasteboard.general.string else { return }
        NotificationCenter.default.post(name: Notification.Name.Paste, object: nil, userInfo: [Keys.PastedString: string])
    }

    override func delete(_ sender: Any?) {
        NotificationCenter.default.post(name: Notification.Name.Delete, object: nil)
    }

    override func resignFirstResponder() -> Bool {
        isHighlighted = false
        return super.resignFirstResponder()
    }

    public func showMenu() {
        becomeFirstResponder()
        isHighlighted = true
        let menu = UIMenuController.shared            
        menu.showMenu(from: self, rect: bounds)
    }
}

I use custom paste and delete notifications to message my model object, where the paste and delete actions are processed to update the display appropriately, which works for my purposes. Bindings could also be used.

To use:

SelectableText(text: text, isSelected: self.$isSelected)
    .onTapGesture {
         self.isSelected.toggle()
     }
     .onReceive(NotificationCenter.default.publisher(for: UIMenuController.willHideMenuNotification)) { _ in
         self.isSelected = false
     }
4
  • 8
    This is awesome! But isn't it a bit crazy we don't just have a selectable parameter on Text?
    – speg
    May 12, 2020 at 19:04
  • 1
    this didn't work for me...tons of errors, "Value of type 'SelectableLabel' has no member 'stringValue'", "Cannot find 'Keys' in scope", "Type 'Notification.Name' (aka 'NSNotification.Name') has no member 'Delete'"...pretty much copied into a new swift file (xcode 12.2) Dec 9, 2020 at 17:14
  • Sorry, a few things were omitted in the code snippet. stringValue is a convenience extension on UILabel to return a non-optional value, you can replace with text ?? "". Notification.Name.Delete is an extension on Notification.Name for a custom notification (same for .Paste). Keys is a struct which holds strings which I need to pass around, so the compiler can check, since I frequently make typos.
    – jbaraga
    Dec 11, 2020 at 13:56
  • Value of type 'SelectableLabel' has no member 'stringValue'. But it has this error
    – Gank
    Jul 16, 2023 at 10:47
0

Or we can use something like this when we want show "copy" tooltip for text without allowing editing.

As benefit we will have possibility to using native view "Text" which gives us the opportunity using native methods ".font()", ".foregroundColor()" and etc. Also we can use it for group of views, for exapmple cell.

Building on the prior answers.

Playground code

import PlaygroundSupport
import SwiftUI

private class SelectableUIView: UIView {

    var text: String?

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.setup()
    }

    func setup() {
        self.addGestureRecognizer(UILongPressGestureRecognizer(target: self, action: #selector(self.showMenu)))
    }

    @objc func showMenu(_ recognizer: UILongPressGestureRecognizer) {
        becomeFirstResponder()

        let menu = UIMenuController.shared
        if !menu.isMenuVisible {
            menu.showMenu(from: self, rect: frame)
        }
    }

    override func copy(_ sender: Any?) {
        let board = UIPasteboard.general
        board.string = text

        UIMenuController.shared.hideMenu()
    }

    override var canBecomeFirstResponder: Bool {
        return true
    }

    override func canPerformAction(_ action: Selector, withSender sender: Any?) -> Bool {
        return action == #selector(UIResponderStandardEditActions.copy)
    }

}

struct SelectableView: UIViewRepresentable {

    var text: String

    func makeUIView(context: Context) -> UIView {
        let view = SelectableUIView()
        return view
    }
    func updateUIView(_ uiView: UIView, context: Context) {
        guard let view = uiView as? SelectableUIView else {
            return
        }
        view.text = text
    }
}

struct SelectableContainer<Content: View>: View {

    private let content: () -> Content
    private var text: String

    public init(text: String, @ViewBuilder content: @escaping () -> Content) {
        self.text = text
        self.content = content
    }

    public var body: some View {
        ZStack {
            content()
            SelectableView(text: text)
                .layoutPriority(-1)
        }
    }

}

struct SelectableText: View {
    private var text: String

    public init(_ text: String) {
        self.text = text
    }

    public var body: some View {
        ZStack {
            Text(text)
            SelectableView(text: text)
                .layoutPriority(-1)
        }
    }
}


struct TextTestView: View {

    @State private var text = "text"

    var body: some View {
        VStack {
            SelectableContainer(text: text) {
                VStack(alignment: .leading) {
                    Text("Header")
                        .font(.body)

                    Text(text)
                        .background(Color.orange)
                }
            }
            .background(Color.yellow)

            SelectableText(text)
                .background(Color.black)
                .foregroundColor(.white)
                .font(.largeTitle)
        }.padding()
    }

}

let viewController = UIHostingController(rootView: TextTestView())
viewController.view.frame = CGRect(x: 0, y: 0, width: 400, height: 200)

PlaygroundPage.current.liveView = viewController.view

Playground view Playground view

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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