Enter key not working on Android #331

Closed
pigletso opened this Issue Jan 17, 2012 · 18 comments

6 participants

@pigletso

I'm using Code Mirror since 2.18 and I wish to use Code Mirror through my 2.3.5 version android phone to edit my code.

Everything was great but there is one problem I have met and I hope this will be fixed.

The problem is : I cannot new a line when I press "Enter" button in android default browser

I looked up closed issues and found one was talking about iOS and android supporting (https://github.com/marijnh/CodeMirror2/issues/60) which had a comment posted by @schanzer provided a link to a "Functional Enter button" of previous versions of CodeMirror (www.litech.org/~schanzer/iOS). I tried to find the position of the problem using diff checker but I still failed.

I thought editing code in mobile phones were really cool. I also tried to use another browser (Firefox) to try the problem and it works OK, but I am not willing to use another browser before I tried to find the solution here.

Please take a look of this issue if you are interesting in. And, thanks a lot to Marijn for creating this powerful CodeMirror!

@marijnh
CodeMirror member

On my Android phone (also version 2.3.5), I can simply press the ↵ key on the touch keyboard to insert a newline. I tried in the mode demo pages.

@pigletso

Sorry... but I tried all demos including some of real-would uses' examples, none of them work...
Are you using the most original one default android browser? Or does anybody have met this issue too?

@marijnh
CodeMirror member

Yes, I'm using the default browser. Anyone else with an Android device reading this? We need more data points.

@kramer314

It's not working for me either (on Android 2.3.3), with either virtual or physical keyboards - we've also had some people mentioning this on the sage-devel mailing list recently related to cursor positioning and cut and paste not working in the default browser for Android 2.3 and 3.2. I can dig out the threads if you'd like.

@peterkroon

The problem is : I cannot new a line when I press "Enter" button in android default browser

I can reproduce this on Android 2.3.3

@marijnh
CodeMirror member

So it appears my phone is in the minority. I just triple-checked, it still seems to handle the enter key as expected. Does anyone feel like digging into this? (Logging which events get fired, and how they get handled?)

@peterkroon

When pressing enter, these do not get fired t all: onKeyDown,onKeyPress

@pigletso

I think I found the issue of the enter key problem, it's "overflow" at div
Related article : www.androidannoyances.com/post/51

Here is the original code:

wrapper.innerHTML =
'

' + // Wraps and hides input textarea
' 'autocorrect="off" autocapitalize="off" overflow: hidden; resize: none; opacity: 0; margin: 4 0 0 2; display: block; z-index: -1;>
' +

And here is my fix code...(I think this is not perfect at all), but is aim to don't use overflow at div, then Enter key will works. After this fixed, the enter handling seems got wrong, I don't know how to describe, please have a try, Thanks.

wrapper.innerHTML =
//'

' + // Wraps and hides input textarea
'
' + // Wraps and hides input textarea
//' // 'autocorrect="off" autocapitalize="off" overflow: hidden; resize: none; opacity: 0; margin: 4 0 0 2; display: block; z-index: -1;>
' +
' 'autocorrect="off" autocapitalize="off" >
' +

@peterkroon

Unable to reproduce....
Are you using the latest development snapshot?
Can't find and update your provided code.

@pigletso

Yes it is 2.18 and 2.2 is the same code
It's line 23 in my 2.18 version

@peterkroon

Well that's a stable release.
The development snapshot can be downloaded right here: http://codemirror.net/codemirror2-latest.zip
This link is on the homepage of http://codemirror.net/

@marijnh
CodeMirror member

I'm somewhat sceptical that overflow: auto could break enter. It could (and will) break scrolling, for sure, but it's probably not the cause of the enter key problem.

@peterkroon

I've posted a demo here: http://5060.nl/codemirror/2012-01-31/mode/clike/index.html
Visit this url on your mobile device.
When you press the letter 'a' an alert will popup because the keyDown is triggered.
When the alert box appears and you click OK you need to focus the editor again.
When pressing the Enter key absolutely nothing happens(on my phone).

Edit:

When the alert box appears and you click OK you need to focus the editor again.
Not true, the first input hides the cursor and does not display the character.

@peterkroon

I just updated the firmware on my phone to 2.3.6 and the issue still occurs

@capacman

it may not be the issue but sometimes different keyboard types can cause some weird behaviors especially text correction is open on android.

@eustas

Works for me on 4.0.2

@marijnh
CodeMirror member

Part of a possible solution given by Douve:

I somehow managed to solve the enter key problem by removing padding: 0; from var input = elt("textarea", null, null, "position: absolute; padding: 0; width: 1px; height: 1em"); and removing overflow: hidden; from var inputDiv = elt("div", [input], null, "overflow: hidden; position: relative; width: 3px; height: 0px;");
Then there appears a line under the cursor, to solve that you can set height: 0; in var input.

Only a new small problem arises: at the second time (and afterwards) of clicking on a line, the cursor dissapears. It shows up again after pressing a key.
But it's not a very big problem, atleast it is possible to edit code now!

@marijnh marijnh added mobile and removed mobile labels Oct 20, 2014
@marijnh
CodeMirror member

Should be much better in 5.0.

@marijnh marijnh closed this Feb 24, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment