Strange Chrome rendering text in textbox issue - html

As you can see in this image I have a text box, when the user click on the textbox and starts typing the placeholder disappears and you begin typing. Although what ever you type on the first line, the text renders in a strange way.
If you look closely at the screen shot you can see white lines around the g and also along the line, these disappear once you drop down a line so is it something to do with the placeholder?
See it in action here
http://joshhornby.co.uk/typewriter/

Related

when user enters anything in Korean into the input tag and shifts the focus to any other part of the screen, the focus is shifted back to the input

jsfiddle
steps to reproduce :
write Korean in the input box
scroll down till the input box is hidden
Click any where on the screen
Expected: input box will come into focus at (Korean text)
when the user types in Korean in the input box .and if we move the input box out of frame. and click anywhere else .input box will keep in frame .this is not reproducible in mac. `
If you want the focus to be added back to the input field even on clicking anywhere on the screen, use focus-me="1" (I took 1 as an example, you can use any number).
If you don't want the focus to be added back to the input field, you can use $removeAttribute('focus-me') or remove the autofocus element using your .ts file

Actionscript: input text on iOS working differently than in the simulator

I have an input box created in Flash Professional 500px x 500px, set as Classic Text > Input Text > Singleline.
I import this into my Actionscript project and set to
wordWrap = true;
In the simulator this works great.
However on iOS wordwrap does not occur during input. Everything appears on a single line which is in the center of the textbox height, when focus returns to the app the text is then correctly wrapped.
How can I make it work like it does in the simulator.
As a fix I tried using multiline text box.
This does not have the issue above, however it introduces a new issue, on selection of the textbox the cursor appears one line below the top, I have to press backspace to move to the top of the textbox, interestingly the text box has size 0 despite some sort of new line existing. This occurs in the simulator as well as on the device.

Can't select text in contenteditable in Chrome by using keyboard

In Chrome, I can't select the contenteditable text context by using the keyboard in Chrome when the text contains a long string that wraps to the next line.
This repro's in Chrome (latest; Chrome 47 at the time of my writing this).
Repro steps
Click to place the cursor at the end of the contentedtable div (in the snippet below).
Hold shift and hit the up arrow a bunch of times.
Expected: All text becomes selected.
Observed: The text before the space ("foo") is never selected.
Here's the code. NOTE the character after "foo" is a space, not a newline!
<div contenteditable="true" style="background: #ddd; width: 200px; height: 100px;">foo asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;</div>
Actually, that's the correct behavior of textboxes in general.
In this case, you see the two words in different lines because the second one is wider than the container, so you see a line break and you try to use the up arrow to select "foo".
But, as you say in the question, after "foo" there is a space character, so you must use the left arrow to select it.
Just imagine the same case but with a full width textbox, you would only try to use the left arrow. Only the style changes here, not the behavior for that specific content.

Adobe AIR softKeyboardBehavior auto-pan

I have an Adobe AIR mobile app with many editable text fields, some of which get partially covered up by the soft keyboard when it opens. I am trying to take advantage of the "pan" softKeyboardBehavior, which causes the screen to automatically pan so the text is above the keyboard.
However, this always scrolls so that the line of text containing the cursor is immediately above the keyboard. In other words, if I have a 7-line textfield and the user taps the top line, the other 6 lines will be covered by the keyboard, making editing the text nearly impossible.
Is there any way to adjust how AIR positions the text relative to the keyboard when softKeyboardBehavior is set to "pan"?
Almost immediately after I posted this, I thought about a decent workaround:
private function onSoftKeyboardActivate(event:SoftKeyboardEvent):void {
textField.setSelection(textField.text.length, textField.text.length);
}
This forces the cursor to the end of the text that's already in the textfield, which will scroll the textfield higher. If the number of lines of text is shorter than the length of the textfield, adding new text from the bottom will scroll the screen to make more of the textfield visible.

Text wrapping is terrible in Sublime Text--or what am I doing wrong?

When I attempt to wrap text (and is there not an automatic wrap at edge of window feature??) it totally screws up the other lines of text above and below it.
What's the deal?
I believe you have the word wrap column set to a hard number, but do not have it enabled.
You can toggle it by clicking
View > Word Wrap
or
In the command palette (ctrl+shift+p) type Word Wrap: Toggle
If you want it to auto-wrap at the edge of the window click:
View > Word Wrap Column > Automatic