Using native javascript have a html onclick change text to uppercase as you type

Question

I an creating a project where people can create posts. I have a text editor I'm creating for this section. I need to make text uppercase if user clicks a button. All these other buttons work with execommand but there isnt an option for uppercase. My question is there an alternative I can use to do this?

Javascript

 function headBold() {
 document.execCommand('styleWithCSS', false, true);
 document.execCommand('bold',false,null);}
 function headItalics() {
 document.execCommand('styleWithCSS', false, true);
 document.execCommand('italic',false,null);}
 function headUndLne() {
 document.execCommand('styleWithCSS', false, true);
 document.execCommand('underline',false,null);}
 function headuppercase() {   }

HTML

<button type="button" onclick="headBold();" class="bolden">B</button>
<button type="button" onclick="headItalics();" class="italics"><i>I</i></button>
<button type="button" onclick="headUndLne();" class="underline">U</button>
<button type="button" onclick="headuppercase();" class="upperCase">Tt</button>

This is being used in a content editable div not an input. Please no JQuery. The effect I'm looking for is the same one in CSS.

font-variant: small-caps;

You wanted the selected text to have the desired effect? – weirdpanda Feb 11 '18 at 00:24 — weirdpanda, Feb 11 '18 at 00:24
yes the same as CSS font-variant: small-caps produces. – Jonny Feb 11 '18 at 00:27 — Jonny, Feb 11 '18 at 00:27

zer00ne · Accepted Answer · 2018-12-21T19:38:30.030

4

There's no command identifier for font-variant:small-caps. The demo is solution that'll compliment an editor such as yours, but it doesn't use execCommand but it performs exactly like one.

function tags(tag, klass)

Usage: Select some text, then call tags("span", "sC")

Creates a tag with the specified class from the required parameters.
Uses the Range and Selection API to wrap the dynamically created tag around the selected text.

Result: <span class="sC">Sᴏᴍᴇ Tᴇ𝘅ᴛ</span>

function setB() {
  document.execCommand('bold', false, null);
}

function setI() {
  document.execCommand('italic', false, null);
}

function setU() {
  document.execCommand('underline', false, null);
}

function setsC(e) {
  tags('span', 'sC');
}

function tags(tag, klass) {
  var ele = document.createElement(tag);
  ele.classList.add(klass);
  wrap(ele);
}  

function wrap(tags) {
  var select = window.getSelection();
  if (select.rangeCount) {
    var range = select.getRangeAt(0).cloneRange();
    range.surroundContents(tags);
    select.removeAllRanges();
    select.addRange(range);
  }
}

#editor {
  min-height: 100px;
  width: 80%;
  border:4px inset grey;
  padding:3px 5px;
}

.sC {
  font-variant: small-caps
}

<section id='editor' contenteditable='true'></section>
<button type="button" onclick="setB();" class="bd"><b>B</b></button>
<button type="button" onclick="setI();" class="it"><i>I</i></button>
<button type="button" onclick="setU();" class="uL"><u>U</u></button>
<button type="button" onclick="setsC();" class="sC">Tt</button>

edited Dec 21 '18 at 19:38

answered Feb 11 '18 at 02:40

zer00ne

41,936
6
41
68

How do you save the markdown of the newly stylized text? Like if I want to reload all my edits later? Is there a property that contains `text`? – Soubriquet Dec 21 '18 at 18:38
SO markdown editors accept some phasing elements like: `` (or **), `` (or *), `^{`, ``, etc., [HTML entities](http://www.amp-what.com/unicode/search/%2F%26%5Cw%2F) are also accepted. See this [help section](https://stackoverflow.com/editing-help).} – zer00ne Dec 21 '18 at 19:35
How can you use this to toggle the class on and off depending on the selected range? – msqar Jul 24 '19 at 20:16
@msqar Try changing this line: `ele.classList.add(klass);` to this line: `ele.classList.toggle(klass);` – zer00ne Jul 25 '19 at 13:45
Will this toggle the class to the entire node/selected node? I'm implementing a summernote plugin where you can add style text-transform: uppercase or lowercase and of course, be able to toggle it to a selected node. But i notice in my implementation that is kinda based on yours that i keep creating new nodes and wrapping them around with the old node as the parent. – msqar Jul 25 '19 at 13:50
1

@msqar I have an answer that resolves nested wraps [here](https://stackoverflow.com/a/55411995/2813224). If you need help implementing it, as the answer is agnostic and may need further augmentation to cooperate with a plugin, you'll need to post a separate question and reference this and/or the other question/answer. On the other hand, if any answer/question helps resolve your problem remember to upvote it. – zer00ne Jul 25 '19 at 14:24

score 0 · Answer 2 · answered Feb 11 '18 at 00:14

0

Create a function where you get the input you are trying to transform the text to uppercase to:

var headUpperCase = function(){
   var inputValue = document.getElementById("your-input").value;
   inputValue = inputValue.toUpperCase();
}

and then

<button type="button" onclick="headuppercase();" class="upperCase">Tt</button>

answered Feb 11 '18 at 00:14

filipbarak

1,835
2
17
28

This is being used in a content editable div not an input. I cant get it to work. – Jonny Feb 11 '18 at 00:24
it needs to be in real time. If you click the button it activates uppercase as you type if you click it again it deactivates while you type. – Jonny Feb 11 '18 at 00:29

score 0 · Answer 3 · answered Feb 11 '18 at 01:44

I would use text-transform:uppercase;, it will make the inner text of the div capitalized.

function makeUpperCase() {
  var contentDiv = window.document.getElementById("editable-container");
  var contentDivTextTransform = contentDiv.style.textTransform;
  if(contentDivTextTransform === "uppercase") {
    contentDiv.style.textTransform = "";
  } else {
    contentDiv.style.textTransform = "uppercase";  
  }  
}

Here is a fiddle

Using native javascript have a html onclick change text to uppercase as you type

3 Answers3