troubleshooting Question

Javascript Change Font And Remove Last Character

Avatar of GlobexCorp
GlobexCorp asked on
JavaScript
7 Comments1 Solution1300 ViewsLast Modified:
Hi experts my problem is I hate a <DIV> where the user can enter a message like a noticeboard.
The user can also apply font attributes such as height colour etc. Just to show a simplified version of my problem I have a drop down menu that lets you specify the size of the text. I have a maximum amount of characters allowed in the <DIV> and when the user goes above this it sends a popup alert and removes the last entered character. My problem here however is that when it removes the last entered character it also removes all previous formatting. I have tried to call the doFontSize function again after the character is removed i.e. doFontSize(7, dvEditDetails.innerHTML);  but this only seems to be applied to text entered after what has already been entered. Any suggestions would be greately appreciated.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 
<script language "javascript">
    function doFontSize(PX, obj) {
        document.execCommand("FontSize", 0, PX)
    }
   
    function charactersRemaining() {
        var x = document.getElementById('dvEditDetails')
        var cnt = countCharacters(x);
       var intmaxcharacters = 5
        var msg;
        if (cnt > intmaxcharacters) {
            //document.getElementById("txCharacterCount").value = "test"
            alert("Max Characters Exceeded")
            document.getElementById('dvEditDetails').innerHTML =
            document.getElementById('dvEditDetails').innerText.substring(0, document.getElementById('dvEditDetails').innerText.length - 1);
            doFontSize(7, dvEditDetails.innerHTML);           
            msg = 0;
        }
 
        else {
            msg = intmaxcharacters - cnt;
        }
        document.getElementById("txCharacterCount").innerText = msg;
 
    }
 
    function countCharacters(n) {
        if (n.nodeType == 3) {
            return n.length;
        } else {
            var numchars = 0;
            if (n.nodeName == 'P') numchars = 2;
            for (var m = n.firstChild; m != null; m = m.nextSibling) {
                numchars += countCharacters(m);  // Add up total characters found 
            }
            return numchars;
        }
    }
 
    
</script>
 
 
 
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    
        <select id=ddlfontsize class="FieldValue" onchange="doFontSize(this.options[this.selectedIndex].value,dvEditDetails)">
        <option value="default" selected>
        --
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
    <div id = "dvEditDetails" class = "EditBox" style="height: 290px; width: 400px; padding: 10px" runat ="server" contenteditable="true" OnkeyDown= charactersRemaining(); OnkeyUp= charactersRemaining();>
    
    </div>
    <input id="txCharacterCount" type="text" 
            style="width: 163px" />
    </form>
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 7 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 7 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros