[Eric]

Hello,

I’m using AppTextEdit for user input. I am also using Javascript to limit the number of characters allowed. However, once the character limit is passed, the Javascript code reverts the text to the previous value and when it does so, the cursor in the text area resets to the beginning of the text. Below is my code:

 

       Rectangle {
            width: parent.width
            height: dp(200)
            border.width: dp(1)
            border.color: "#000000"
            radius: dp(10)

            AppFlickable {
                id: flick

                anchors.top: parent.top
                anchors.topMargin: dp(10)
                anchors.right: parent.right
                anchors.rightMargin: dp(10)

                width: parent.width - dp(20)
                height: parent.height - dp(20)
                contentWidth: comment_text.paintedWidth
                contentHeight: comment_text.paintedHeight
                clip: true

                function ensureVisible(r) {
                    if (contentX >= r.x)
                        contentX = r.x;
                    else if (contentX + width <= r.x + r.width)
                        contentX = r.x + r.width - width;
                    if (contentY >= r.y)
                        contentY = r.y
                    else if (contentY + height <= r.y + r.height)
                        contentY = r.y + r.height - height;
                }

                function limitLength() {
                    if (comment_text.text.length <= app.max_comment_length) {
                        comment_text.temp_text = comment_text.text.slice(0);
                    } else {
                        comment_text.text = comment_text.temp_text.slice(0)
                    }
                }

                AppTextEdit {
                    id: comment_text
                    property string temp_text
                    width: flick.width
                    height: flick.height
                    verticalAlignment: AppTextEdit.AlignTop
                    focus: true
                    wrapMode: TextEdit.Wrap
                    onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
                    onTextChanged: flick.limitLength()
                    placeholderText: "Enter notes here..."
                }
            }
        }

I’ve tried multiple methods of limiting the character length allowed but they all do the same thing to the cursor. It seems that any time the text is changed via a Javascript function, QML interprets this as possibly removing the text then setting it again, which causes the cursor to reset.

 

Any help with this would be greatly appreciated.

 

Thank you,
Eric Schmidt

[AlexFelgo Team]

Hi Eric,

have you tried setting the cursor position manually after changing the text?

Cheers,
Alex

[Eric]

Thank you, Alex. Not sure how I missed that. But in case anybody else is interested, I made two changes to my code, first I changed the else {} section of the limitLength() function to

 

} else {
  var cursor_pos = getCursorPosition() // This function is defined below
  comment_text.text = comment_text.temp_text.slice(0)
  comment_text.cursorPosition = cursor_pos
}

 

Then I added the getCursorPosition() function:

 

function getCursorPosition() {
  for (var i = 0; i < comment_text.temp_text.length; i++) {
  if (comment_text.temp_text[i] !== comment_text.text[i])
    break
  }
  return i
}

 

The only somewhat strange behavior is that if a character is entered by the user that is the same as the character located at the current cursor position, the character is replaced and the cursor moves forward one spot.

 

The main problem with this that I can see is the iteration in getCursorPosition() in that if the allowed character count is very large, the code may have to iterate through a large string to get the cursor position.

 

So, if anybody sees this and has a better/cleaner/more efficient way of doing this, please let me know.

 

Thank you,
Eric