asked on

Javascript Change Font And Remove Last Character

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>

Open in new window

Michel Plungjan

doFontSize(7, dvEditDetails);

GlobexCorp

ASKER

Had tried that previously also but doesn't work

Michel Plungjan

Then I suggest you consider returning false on the keyPress event handler if there are too many chars.
That way the user cannot even enter too many

Kin Fat SZE

some adjustment

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title></title>
 </head>
 
<script language="javascript">
 
    function doFontSize(PX, objId) {
//        document.execCommand("FontSize", 0, PX)
        var vfontsize;
                
        vfontsize = PX + 'pt';
        var theEl = document.getElementById(objId).style;
        theEl.fontSize      = vfontsize;
    }
 
   
    function charactersRemaining() {
        var x = document.getElementById('dvEditDetails')
        var cnt = countCharacters(x);
       var intmaxcharacters = 5
        var msg;
        if (cnt > intmaxcharacters) {
            document.getElementById('dvEditDetails').innerText =
            document.getElementById('dvEditDetails').innerText.substring(0, document.getElementById('dvEditDetails').innerText.length - 1);
            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>
 
 
 
    
 
<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="6">1</option>
        <option value="8">2</option>
        <option value="10">3</option>
        <option value="12">4</option>
        <option value="14">5</option>
        <option value="16">6</option>
        <option value="18">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>

Open in new window

GlobexCorp

ASKER

Thanks for the replies The only problem with that is that I have a lot of functions that change the styling on the text being entered so not sure how I would go about chaning the syntax on some of these as below or is there an easier way? Thanks

function doFontColor(COLOR,obj)
{   
    
      //obj.style.color = COLOR;
      document.execCommand("ForeColor",0,COLOR)
      //font_size = "<br>&nbsp\;&nbsp\;&nbsp\;font-size:" + PX + "px\;";
 
}
 
 
function doFontFamily(FONT,obj)
{
   if(FONT == "default")
   {
      FONT = "";
      font_family = "";
   }
   else
   {
      font_family = "<br>&nbsp\;&nbsp\;&nbsp\;font-family:" + FONT + "\;";
   }
   //obj.style.fontFamily = FONT;   
   document.execCommand("FontName",0,FONT)
 
 
}
 
function BulletedList(obj){
		InsertList(false,obj);
}
 
 
 
function setFontColor(obj) {
		obj.focus();
		if(highLightToggle==0)
		{
			document.execCommand("backColor", false , "yellow" );
			highLightToggle=1;
		}
		else
		{
			document.execCommand("backColor", false , "white" );
			highLightToggle=0;
		}
}
 
function Underline(obj){
		obj.focus();
		document.execCommand("Underline");
		
}
 
function Bold(obj){
		document.execCommand("Bold");
		obj.focus();
}

Open in new window

ASKER CERTIFIED SOLUTION

Kin Fat SZE

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

GlobexCorp

ASKER

cheers for the info