Caret in textarea doesn't automatically pass new line (only in chrome) - html

<textarea cols="152" rows="5">
Keep pushing space key after
the end of this sentence, you will notice that caret wouldn't pass new
row and stay put, start pushing space key now
</textarea>
When i just keep pushing space key after "start pushing space key now", caret doesn't automatically passes to new line at the very end of line. How can i get caret pass to new row at the end of row automatically? Is there any css solution for that? And only Chrome has this problem.

In Chrome (and a number of applications) the cursor won't jump to the next line until you enter a non-"whitespace" character (so spaces will never drop it down a line). If you observe after keying in enough spaces to move the cursor all the way to the right edge, typing any other character (a number, letter, or punctuation), you will drop down a line. This is simply the way chrome handles textareas, and is not configurable.
On an unrelated note, "^" is a caret.

Related

No indents on blank lines

When I write code, and press Enter, then I insert a new blank line, with normal indents, as it should be.
However, if I click the cursor to another location, and then click back to this line, it will be placed at the beginning of the line.
How to fix it?
I tried to fix it in the ReSharper settings, but did not find it.
Pressing enter after the line you are typing on leaves the cursor at the same indentation level (the new line is blank until you type something and then it will pad it with spaces). If you do not type anything and move the cursor away from that line and then back again it should set the cursor to either the home column or the last indented column if you mouse click beyond that column (further to the right). This only works with mouse clicking, using the cursor keys will only set you to the home position on the new line.
You could always enable virtual space then you can place your cursor where ever you want.
Instead of Tab, if you use space, it stays as it should be but it is not a good practice.

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.

Close tags dropping below highlighted line

I have minimal experience with HTML script so this may all go horribly wrong here.
Alright so I have a very simple yet very time consuming task of taking complete papers and converting them into HTML script. I'm using Sublime Text 3 with Emmet plugin.
Basically,
This is the first header
This is the first paragraph that needs to be tagged
This is the second header
This is the second paragraph that needs to be tagged
So super simple I need to put header tags on the headers and paragraph tags on the paragraphs.
What I have been doing is holding Ctrl and manually highlighting the desired text as it is all rather random. Problem is that takes forever to manually highlight the text like that.
I am aware of other ways to highlight such as Ctrl + L for the line. Problem is my close tags end up under the highlighted line.
Example:
<h2>This is the first header
</h2><p>This is the first paragraph that needs to be tagged
</p>
It's not a big deal but it makes the code harder to go through later and really chaotic.
The same problem persists if I click the corresponding number of the line.
Seeing as I have hundreds of pages to enter and even more headers, paragraphs, and pictures to properly tag; I'm looking for a solution to the tag dropping below the line or a faster method to entering text.
So, is there a fast method for entering text from a word document to Sublime text and quickly get the corresponding tags? e.g. <h2>,<h3>,<p>,<ul>,<li> and so on.
Any help will save my sanity, thanks.
When you select a line with CtrlL, it automatically selects the entire line, and moves the cursor down to the first position on the following line. There are two ways around this. The first is to place the cursor in the first position on the line you want to select, then just hit ShiftEnd and the line will be selected, with the cursor now sitting in the last position on that same line. Alternatively, use CtrlL, then hit Shift← (left arrow) to move the cursor from the first position on the next line to the last position on the selected line. Either way, you can now hit the key combo in Emmet for inserting a tag pair, and you're all set.

ST2 -- split_selection_into_lines -- left side of block

Is it possible to split_selection_into_lines at the left side of the block, instead of the right?
It would be nice to select several lines (in one fell swoop) and then type something that will precede each line. I have been using the command+left-click for the left-hand margin, but it is difficult to know whether each line has actually been selected because each line is vertically aligned (e.g., flush-left) -- it is also time consuming to select each line manually.
A simple way is to just find-replace, and replace a delimiter with "\n [text that precedes this line]"
After selecting "split_selection_into_lines" (ctrl+shift+l), the keyboard shortcut command+left-arrow moves multiple cursors the left side of the highlighted block.
Alternatively, holding down the option(alt) key and holding down the left click on the mouse lets the user select everything within a vertical line that is defined by moving the mouse up or down.
https://tutsplus.com/lesson/multiple-cursors-and-incremental-search/

Tab character trimmed when reaching the end of page

I have a situation like this http://jsfiddle.net/9cRpe/ .
You can see that the &#09 chars (tab character in html) is trimmed/removed when reaching the end of page. Is it something that can be modified by css so the tab is not trimmed?
See the attached image for the result i'd like to achieve. Thanks
white-space: pre-wrap;
MDN Document
Edit: OK, I made a silly answer.
I think the [Tab] character is not designed to act as "insert n spaces here". Instead, consider the following scenario:
--->code
//->code
You can see this in many IDE as long as you don't convert [Tab]s to [Space]s. So I think the [Tab] character means "push the next character to the next tab position".
That's why you don't see a desired space, because "the next character has already been placed in the next tab position".
Compare these two fiddles: http://jsfiddle.net/9cRpe/1/, http://jsfiddle.net/9cRpe/2/,
notice the space I added before the first "===>", and you can see the first "<===" doesn't move ---- it always aligns to the "tab" word on the first line.
I can't think of a solution right now, but I want to cover my previous stupid-ness, so I write these things that hopefully can inspire you...
Try 5 insted of &#09