Format numbers in a text string
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

would ideally like to have a TEXT box that as the user types in it we format the numbers they enter as red while the alpha items stay black. would resemble something like

https://www.dropbox.com/s/xbr10s05qmz63gy/2019-08-15_11-03-33.png?dl=0

but ideally in the textbox.

no jquery and as lean as possible would be nice here.

awarded to ocanal
Tags
javascript

Crowdsource coding tasks.

4 Solutions


Here's my take: https://codepen.io/kostasx/pen/oNvxqQe?editors=0010

All in the editor.

Using Quill.js

Winning solution

Here is my solution,

https://jsfiddle.net/ocanal/rtk83zow/1/

It uses textarea not [contenteditable] as you expect.

idea is from here

Nice! ;)
kostasx 1 month ago
hey this was really cool - thx!
Qdev 1 month ago

It's not possible to do what you want in standard HTML using only a textbox. You will have to use a richtext box like the one you have in WYSIWYG elements at least : https://ckeditor.com/

There are many topics on this subject on the web : https://stackoverflow.com/questions/3121683/is-there-a-way-to-style-part-of-an-input-fields-value

The possible thing to do is to have a textbox, and just below a div styled as a textbox but non editable that manages your style like this (copy/paste this code in a new html file) :

<html>
<head>
<style type="text/css">
.textbox {
  border: solid 1px black;
}
.number {
  color: red;
}
</style>
<script language="javascript" type="text/javascript">
function colorize() {
  var texte = document.getElementById("textElement").value;
  var output = "";
  for (var i = 0; i < texte.length; i++) {
    if (texte[i] >= '0' && texte[i] <= '9') {
        var spanValue = "<span class=\"number\">" + texte[i] + "</span>";
        output = output + spanValue;
    }
    else {
        output = output + texte[i];
    }
  }
  document.getElementById("myText").innerHTML = output;


}
</script>
</head>
<body>
<input type="text" onKeyUp="return colorize();" id="textElement"/>
<div id="myText" class="textbox">
</div>
</body>
</html>

EDIT : I can't put it in a jsfiddle, but with summernote, you have to set this :

<html>
<head>

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.js"></script>

<script language="javascript" type="text/javascript">


$(document).ready(function() {
    $('#summernote').summernote({
        callbacks: {
            onKeydown: function(e) {
                let key = Number(e.key);
                if (isNaN(key) == false) {
                    $('#summernote').summernote('foreColor', 'red');
                }               
            },
            onKeyup: function(e) {
                let key = Number(e.key);
                if (isNaN(key) == false) {
                    $('#summernote').summernote('foreColor', 'black');
                }
            }
        }
    });
});

</script>
</head>
<body>
    <div id="summernote">Hello Summernote</div>
</div>
</body>
</html>
ah CKeditor would be an interesting idea here. i wonder if we could use Summernote for the bounty? since its already an editor in my project
Qdev 1 month ago
View Timeline