We Keep Coding

Keep placeholder partially while typing in input type text

How can I create a input text in React with placeholder as DD-MM-YYYY,
when I start typing the value, the placeholder should be removed partially.
For eg if I type 02-MM-YYYY(in this case -MM-YYYY should be visible part of the placeholder)

The pattern you are describing is an input mask, so you might have more luck searching for this than placeholder.
First of all, have you considered using <input type="date">? Most browsers also provide an input mask for this kind of input.
If this doesn’t help you, HTML does not provide input mask functionality natively, so you will need to find a library that does that for you.
As always, you should clarify your basic requirements before choosing a library from npm. Most notably, it should be accessible for users with disabilities. Input masks seemingly improve user experience, but they are hard to get right. If not done well, they actually render the user’s experience worse.
Things the input should still support with input mask applied:
(Copying and) Pasting the value from elsewhere
Autofill by the browser (for your birthdate, for example)
Screen readers announce the value correctly
Correcting the value by means of keyboard only, for example deleting one number in the middle
The pattern adjusts with the locale (language)

Detecting and Managing Selected Text

I'm trying to write JavaScript that manages the text a user selects in a webpage, but I'm not sure where to begin; i.e., I was wondering if there was a way to limit the ability to select/highlight text so that the selection ends at a terminating punctuation mark, and the user cannot select anymore (And possibly trigger an alert window or send an event when that limit is first reached). Also, is there a way to change the colour of highlighted/selected text in a browser? I'm familiar with JavaScript pointer and click events, but I'm having trouble finding any information on what I'm looking for.
Thanks in advance.

You want to look at window.getSelection().getRangeAt(0);
I found this answer pretty useful when I was looking at that:
https://stackoverflow.com/a/12823606
The context there is specifically highlighting, but obviously once you have the text you can do other things with it.

Add linebreak with jQuery at end of each textarea row

So I have been googleing around for a couple of days but I have not found a solution so far, so I'm turning to you guys with hope that there even is a possible solution for this.
I need to, at the end of each line in a textarea add a linebreak before it is sent to PHP. That is, even if the user does not press enter but if a word get's cut of or it just jumps down a row because it has filled the with of the textarea. And I need to do so with jQuery or Javascript.
Does anyone have any good ideas on how to do so?
Thanks!
Update: Keep in mind that I also need to send the text via a json encoded string with Ajax to PHP. I should have mentioned that!

Try this:
http://jsfiddle.net/r7JBe/2/

Textarea element has COLS attribute, which means maximum number of characters per line. Browser will jump the word that includes the (COLS+1)th character. You could write a piece of javascript that roughly does something like this.
Have a counter to calculate characters since last linebreak.
Loop through the string character by character.
If you see a linebreak, reset counter.
If you see a 21th character since last linebrak (or beginning), go backwards until you see beginning of the word (space for example) add linebread and reset counter and continue.
Else increase counter
Notice that wrapping the line is part of the browsers logic, so if you want it exactly as in browser, you may have to research every browser (for example what they consider as word-break).

There's a little known attribute called wrap for textareas. It's not in the standard though, so your browser compatibility mileage may vary. Go to http://jsfiddle.net/nj3cG/ with chrome and submit the form while watching the network tab in chrome's dev tools. You'll see newlines in what gets sent with the form
http://www.abiglime.com/webmaster/reference/html/tags/textarea.htm
<textarea wrap="off|physical|virtual|hard|soft">
Description
The wrap attribute is used to define how text will wrap in the text box. Possible values:
off disallows word wrapping
physical allows word wrapping and send the text with line breaks in tact when transmitting the data using scripting. Can also be called hard in some browsers
virtual show word wraps in the box but sends the data as one long string of text when transmitting the data with scripts. Can also be called soft in some browsers

MSIE: Keep focus in text field when clicking outside of it

I am trying to make it possible to insert text at the current caret location in a text field when clicking something on the page.
In order to make this work the focus should not leave the text field when clicking, and the caret should not be moved.
I can get this working in - for instance - chrome with event.preventDefault() in the mousedown event.
But in internet explorer I simply cannot make this work. Any suggestions welcome.
Clarification: I am trying to provide some good means for the users to input exotic characters that can not be entered directly from their keyboard.
I have implemented for instance ctrl+alt+p which works well in all browsers, except internet explorer where I cannot stop the default behaviour of pressing ALT (activating the menu bar).
I have then made a "palette" of the characters next to the field, that can be clicked with the mouse while typing. This works well in all browsers, except internet explorer where I cannot prevent the default blur-behaviour of a mouseclick.

Maybe this is a dead conversation but I have a solution.
For IE specifically look into the onbeforedeactivate event. You will want to attach this to the the element you want to keep focus. It's a bit tricky because if you always cancel this event you can never loose focus on this element but if you're careful how you implement it you can achieve what you want.
I've been doing this for a while now with nice clean results.

Don't do this
I suggest you don't do this, because keeping (or better said returning focus) caret in text field will also prevent users from changing browser's address bar which is something you don't want..
I suggest you rather explain your process more detailed and maybe we can suggest a better alternative.
After some clarification
What you should do is insert text/character at caret position. input and textarea preserve caret position even when they loose focus. So you should do something similar to what stackoverflow does here. When you select some text (when you type question/answer) and then click B icon on top, two stars are added around selected text. This is how you should do your special character insertions. When user clicks a perticular exotic character, that character should be added/inserted at input's caret position.
There are quite a few stackoverflow questions related to solving this exact problem - adding text at caret position:
How to insert text at the current caret position in a textarea
How do I insert a character at the caret with javascript?
Setting (or Reading) value of Cursor/Caret in HTML TextArea
Inserting text at cursor in a textarea, with Javascript
Insert text on the current place of the cursor in the browser
...

Capturing mouse-clicks in the DOM with JQuery?

Background
I'm using POST form submissions instead of links with concatenated arguments inside a Web application, so I can exercise control over input.
Unfortunately this means users can't use the quick shortcuts they know to open links in new windows, like control-clicking or middle-clicking.
Problem
I've got what seems to be a workable way to use jQuery to capture mouse input and the various chord keys, based on the W3C DOM mouse events specification:
$("span#clickspan").click( function(event) {
buttonpress = event.button;
ctrlpress = event.ctrlKey;
$("#clickresult").empty();
$("#clickresult").append("<p>Click!</p>");
$("#clickresult").append("<p>Button # " + buttonpress + " pressed!</p>");
if (ctrlpress) {
$("#clickresult").append("<p>Control-click!</p>");
}
//form submission code would go here
event.preventDefault();
}
);
I can capture control-clicks this way (tested in Firefox 3 and IE7), and it correctly (?) reports left-clicks as coming from mouse button #0, but for some reason this code still isn't capturing middle-clicks on the span, and right-clicks still pop up the context menu. I'd like to capture middle-clicks, at least.
Can somebody help there?
What "control" means
The problem with a GET submission/link with concatenated arguments is that anybody can edit the address bar and type in anything. I've already worried about authentication and validation server-side. That's not why I want to work with POST.
I should only be showing users information that's meaningful. Internal database IDs aren't. I should only be letting users interact with the application in meaningful ways. Arbitrarily editing the address bar isn't one of those.
People make typos all the time. From the system's perspective, though, there's no difference between a typo in the address bar and a flaw in the application logic, and I'd rather not push the responsibility for deciding which one just happened off onto the users.

Short answer? Can't do it.
Long answer? Javascript mouse events. Still can't do it.
This begs the question: do you need to use POST or do you simply want to? The only reason why you'd need to is query string length. As to wanting to, you mention "controlling user input". What does that mean exactly?
You should never ever ever rely on the browser for input validation. You can do it there as a convenience but the server should always validate input.
Or is the reason aesthetic (ie shorter, "nicer" URLs)?
You're reinventing the wheel that is hyperlinks. I'm just trying to make sure you have a pretty darn good reason for doing so because it's counterproductive and you're never going to get the same browser support and compatibility as actual hyperlinks. Plus you're likely to simply annoy your users by having things they expect to work not work. Not good.