Develop Reference

Format text as user inputs in a contenteditable div

I'm attempting to make a page that allows users to input text and it will automatically format the input -- as in a screenplay format (similar to Amazon's StoryWriter).
So far I can check for text with ":contains('example text')" and add/remove classes to it. The problem is that all of the following p tags inherit that class.
My solution so far is to use .next() to remove the class I added, but that is limited since there might be need for a line break in the script (in dialogue for instance) and that will remove the dialogue class.
$('.content').on('input', function() {
$("p.input:contains('INT.')").addClass("high").next(".input").removeClass("high");
$("p.input:contains('EXT.')").addClass("high").next(".input").removeClass("high");
});
I can't get || to work in the :contains parameter either, but that's the least of my issues.
I have a JS fiddle
I've worked on this for a while now, and if I could change only the node that contains the text (INT. or EXT. in this example) and leaves the rest alone that would work and I could apply it to the rest of the script.
Any help would be appreciated, I'm new to the stackoverflow so thank you.

See the comments in the code below for an explanation of what's going on.
Fiddle Example
JQuery
var main = function(){
var content = $('.content');
content.on('input', function() {
$("p.input").each(function() {
//Get the html content for the current p input.
var text = $(this).html();
//indexOf will return a positive value if "INT." or "EXT." exists in the html
if (text.indexOf('INT.') !== -1 || text.indexOf('EXT.') !== -1) {
$(this).addClass('high');
}
//You could include additional "if else" blocks to check and apply different conditions
else { //The required text does not exist, so remove the class for the current input
$(this).removeClass('high');
}
});
});
};//main close
$(document).ready(main);

Setting content of an element in tinymce textarea

I have a tinymce textarea (TinyMCE 3.5.11) that contains an element like
<span id="lastreplytimeee">...</span>
I need to access and change the content of this element using the span id as selector.
I have tried things like
tinyMCE.DOM.setHTML('lastreplytime', $input.val());
None worked.
Any suggestions?
this line is within .ready:
$().ready(function() {
jQuery('.flexy_datepicker_input').datetimepicker({
lang:'tr',
format:'Y-m-d H:i:s',
dayOfWeekStart:1,
onChangeDateTime:function(dp,$input){
document.getElementById("lastreplytimeee").innerHTML = $input.val();
}
});
});

1.Maybe try it,this code gets TinyMCE content and then replace some elements (TinyMCE 5)
tinymce.get('TinyMceID').setContent(
tinymce.get('TinyMceID').getContent().replace(
$(tinymce.get('TinyMceID').dom.doc.getElementById('lastreplytimeee')).get(0).outerHTML,
`<span id="lastreplytimeee">` + newValue + `</span>`)
)
2.or use this
tinymce.get('TinyMceID').dom.setHTML("lastreplytimeee", "newValue");

document.getElementById("id") gets the reference to that particular tag.
.innerHTML is to say assign value or display values in the HTML at that particular div you are referring to above.
Try to use-
document.getElementById("lastreplytimeee").innerHTML = $input.val();
If you are using jQuery, try this-
$("#lastreplytimeee").html = $input.val();
Hope it helps :) Happy Coding!

Found the solution, tinymce requires its dom utility to access and play with an element inside it, like:
tinyMCE.activeEditor.dom.setHTML(tinyMCE.activeEditor.dom.select('selector'), 'some inner html');

Input field with attached text to the right

I'm doing a fancy comment list on my project, structured like this:
As you see, there's a comments list and at his bottom there's an input field (textarea) to submit a comment. Note that there's the current username attached to the right (let's call it a simple static appended text).
I just found this little JS to make an input field resize automatically by adapting it to the content.
function resizeInput() {
$(this).attr('size', $(this).val().length);
}
$('input[type="text"]').keyup(resizeInput).each(resizeInput);
But it's not enough. I need it for a textarea and I want it to behave correctly when a comment is long enough to wrap on another line. By definition, the input field is a box, and it obviously acts badly compared to what I want:
Instead, this should be the right behavior:
I looked everywhere and I can't think any way to implement this. Can somebody help me?

Here is a good plugin for textarea. But it using jQuery.
usage simple as always.
$(document).ready(function(){
$('textarea').autosize();
});

You could use the contenteditable attribute:
<span contenteditable="true">comment</span> by <span class="userName">someone</span>
It is supported in practically all browsers. Using the right CSS, you can underline the content and also limit the width.

I think you mean this
NOTE: No check for selection and bound to document. Exercise for the reader to bind to a specific field and swap it for a span
FiDDLE
$(document).keypress(function(e) {
var char = String.fromCharCode(e.which);
if (e.which==13) char = '<br/>'; // needs to handle backspace etc.
$("#textfield").append(char);
$("#hiddenfield").val($("#textfield").text()); // or .html if you want the BRs
e.preventDefault();
});
using
<span id="textfield"></span> - by My Username
If you make the field contenteditable you will get this in Chrome so some additional CSS may be needed

Use a <span> with contenteditable (supported in IE too). Here is a fiddle: http://jsfiddle.net/goabqjLn/2/
<span contenteditable>Insert a comment...</span> by My Username
Then, using JavaScript, attach an event listener that mirrors the inner text of the span into a hidden input field, so it gets submitted with your <form>.
Edit: I have updated the fiddle to also include the JS code. Here is the updated code:
<span class="editor" id="editor" contenteditable data-placeholder="Insert a comment...">Insert a comment...</span> by My Username
<!-- Hide this textarea in production: -->
<textarea type="text" id="comment"></textarea>
And the JS:
function mirror() {
var text = $('#editor').html().trim()
.replace(' ', ' ')
.replace(/<br(\s*)\/*>/ig, '\n') // replace single line-breaks
.replace(/<[p|div]\s/ig, '\n$0') // add a line break before all div and p tags
.replace(/(<([^>]+)>)/ig, ""); // remove any remaining tags
$('#comment').val(text);
}
$('#editor').focus(function () {
var editor = $(this);
if (editor.text() == editor.attr('data-placeholder')) {
editor.text('');
}
}).blur(function () {
var editor = $(this);
if (editor.text() == editor.attr('data-placeholder')) {
editor.text(editor.attr('data-placeholder'));
}
}).blur(mirror).keyup(mirror);

Placeholders with divs, not inputs/textareas

I have working on this problem for a couple weeks off and on. What I am trying to do is have placeholders to show users where they can type. When they do type, I want the placeholder to disappear, but reappear again when the div is empty.
Every thing I have found has to do with cross-browser placeholder support for inputs and textareas, and trying to apply the code for them to my issue results in failure.
I am using h1s for titles and standard divs for descriptions.
My code looks like this:
HTML
<div class="page-desc" contenteditable="true" data-placeholder="Write your description here."></div>
jQuery
var placeholder = '<span class="placeholder">Write your title here</span>';
$(this).html(placeholder);
I have more jQuery code, but it sucks. I am currently using keyup to hide the placeholder, and that's obviously not working. Can someone help me out?
I am totally open to using vanilla JavaScript as well.

You can have something like this:
$('#xdiv').html($('#xdiv').data('placeholder'));
$('#xdiv').keydown(function() {
if ($(this).html() == $(this).data('placeholder')) {
$('#xdiv').html('');
}
})
$('#xdiv').keyup(function() {
if ($(this).html() == '') {
$('#xdiv').html($('#xdiv').data('placeholder'));
}
})
Initially it sets DIV's HTML to placeholder text. Then when user begins to type (on keydown) it checks if DIV still has the placeholder text and if so - removes it. And since user can delete all the data - it checks (on keyup) if DIV is empty, and if so - restores placeholder's text.
Demo: http://jsfiddle.net/bP7RF/

there's a way to do it in css (modern browser only)
.pageDesc:empty:after {content : "Write your description here.";}

Javascript solution (not as pretty, but more cross-browser):
$("#in").keyup(function(){
if(!$(this).html()){
$(this).html($(this).attr('data-placeholder'));
$(this).attr('showing-placeholder',true);
}
});
$("#in").keydown(function(){
if($(this).attr('showing-placeholder')){
$(this).html('');
$(this).attr('showing-placeholder','');
}
});
Working Example: JSFiddle;

Why not use the Blur and Focus event handlers from jQuery and check the Text value of the Div?
Code for quick look:
$('[contenteditable="true"]').blur(function() {
var text = $.trim($(this).text());
var ph = $('<span/>',{ 'class':"placeholder"})
.text($(this).data('placeholder')||'');
if (text == '') {
$(this).html(ph);
}
}).focus(function() {
if ($(this).children('.placeholder').length > 0) {
$(this).html('<span> </span>');
}
});
Fiddle for example: http://jsfiddle.net/qvvVr/1/

Why can't you use the placeholder attribute of the input element.
It seems to do exactly what you want and it's very well supported
(http://caniuse.com/input-placeholder).
Sorry if I have missed something.

Is there a way to style textarea content as the user types with javascript and css?

I'm curious if there's a way to style content in a textarea as a user types.
For example:
<textarea>abcdefghijklmnopqrstuvwxyz</textarea>
Could I highlight all the vowels in the above textarea string on screen using javascript? But still only send the string when the form is submitted?

You can use a div with contentEditable attribute instead of textarea and to do the highlighting there.
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable
You will still need to copy the content of this div to a hidden field of a form if you need to post it.

try this
<div contenteditable="true">
This text can be edited by the user.
</div>

give some id to textarea and bind its onkeyup event with jquery function.something like this
$('#id_of_textarea').bind('keyup', function() {
//for displaying vowels on screen
var str=$('#id_of_textarea').val();
var total_findVowels="";
for (var i = 0; i < str.length; i++) {
if (str.charAt(i).match(/[a-zA-Z]/) != null) {
// findVowels
if (str.charAt(i).match(/[aeiouAEIOU]/))
{
total_findVowels=total_findVowels+str.charAt(i);
}
}
//use some label to display all vowels
$("#some_lbl").text(total_findVowels);
}//for
} );

You can see one of those questions for some inspiration. They talk specifically about live syntax highlighting so is it not exactly what you are asking about but maybe close enough, and syntax highlighting seems to be a more common problem so it's easier to find some ready solutions:
Textarea that can do syntax highlighting on the fly?
Are there any JavaScript live syntax highlighters?
https://stackoverflow.com/questions/1505761/textarea-with-syntax-code-highlighting
Live text color change in javascript

If beeing precise and answer only your question:
There is no way to do it, but as others said there are other ways to solve your task

I use the following snipplet:
$( "#yourtextarea" ).bind( "keyup input paste", parseAndReplaceContent );
My parseAndReplaceContent function calls jQuery's $( "#yourtextarea" ).val() to access and modify the data.