cleaning textarea input while keeping 'caret' in correct position.

[1DMF]

Hi,

I seem to be struggling to find a solution of being able to limit user input in a textarea field while keeping the 'caret' (cursor position) in the correct place.

I have searched high and low and tried to implement the JQuery 'caret' plugin, but with no success.

If I use the followng...

    var chkField = $('#editBox');
	
    mycursorpos = chkField.caret().end;

    var len1 = chkField.val().length;
    chkField.val(chkField.val().replace(/[^0-9 a-z\'\\\/\:\;\-\+\.\?\!\*\(\)\_\& \,\r\n]/gi, ''));
               
    var len2 = chkField.val().length;
    
    if(len1 != len2){
        mycursorpos--;
    }   
    
   chkField.caret({start:mycursorpos,end:mycursorpos});

If I press enter , it moves the caret to the end of the last line above the carriage return?

If I don't try to calculate the position, and I edit some text in the middle of the textarea content, it keeps moving the caret to the end of the content.

I appreciate that as I am replacing the content 'onkeyup' using a regex, that this will move the cursor to the end, but using the JQuery 'caret' plugin doesn't work with the enter key?

I guess I'm doing something wrong or need a different method and hope you can enlighten me.

Cheers,
1DMF

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[1DMF]

Anyone ?

I even emailed the JQuery plugin author in Hong Kong, but got no reply!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[ChrisHirst]

Lifted from the editor I wrote for my CMS

function CheckLen(p_sShowCount, p_sInput, p_iLimit) {
	e = document.getElementById(p_sInput);
		if (e.value.length > p_iLimit) {
		 // if too long...trim it!
			e.value = e.value.substring(0, p_iLimit);
		// otherwise, update 'characters left' counter
		} else {
			document.getElementById(p_sShowCount).innerHTML = p_iLimit - e.value.length;
		}
	}

<div class="brkoutheader">Text -  <span id="charcount">900</span> characters allowed </div>

<textarea onkeydown="CheckLen('charcount',this.id,900);" onkeyup="CheckLen('charcount',this.id,900);"
onblur="CheckLen('charcount',this.id,900);" onfocus="CheckLen('charcount',this.id,900);"
 name="details" id="details" rows="20" wrap="virtual" cols="85" onmouseup="getSelText(this.id);" style="float:left;">Chris Hirst <a href="[URL unfurl="true"]http://webmaster-talk.eu">Webmaster[/URL] Talk</a></textarea>

p_sShowCount is the ID of the element that shows how many characters are left

The maximum length variables are set by serverside code and written into the appropriate places.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ChrisHirst]

Oh yeah, I know, I don't like giving complete code answers normally but that was just to damned complicated to explain in a forum post []

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

Thanks for the reply Chris, but I think you miss-understand the request regarding 'limit user input'.

I have a working solution for number of chars allowed, it's the replace function using the regex and placing the 'caret' in the correct position where the problem lies.

The normal way of doing this by setting ranges doesn't seem to work in a textarea, but works fine in an input...

function doGetCaretPosition (ctrl) {
	var CaretPos = 0;	// IE Support
	if (document.selection) {
	ctrl.focus ();
		var Sel = document.selection.createRange ();
		Sel.moveStart ('character', -ctrl.value.length);
		CaretPos = Sel.text.length;
	}
	// Firefox support
	else if (ctrl.selectionStart || ctrl.selectionStart == '0')
		CaretPos = ctrl.selectionStart;
	return (CaretPos);
}
function setCaretPosition(ctrl, pos){
	if(ctrl.setSelectionRange)
	{
		ctrl.focus();
		ctrl.setSelectionRange(pos,pos);
	}
	else if (ctrl.createTextRange) {
		var range = ctrl.createTextRange();
		range.collapse(true);
		range.moveEnd('character', pos);
		range.moveStart('character', pos);
		range.select();
	}
}

So I tried the JQuery caret plugin, but that seems to have problems with carriage returns.

Unless of course I'm using it wrong?







"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[ChrisHirst]

Are you trying to build an editor interface (just like a forum "post editor"?

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[ChrisHirst]

How about

http://tycoontalk.freelancer.com/javascript-forum/154771-click-button-write-text.html

or if you are palying about with BBCode etc

http://tycoontalk.freelancer.com/ja...-find-formatting-text-script.html#post1092333

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[1DMF]

Are you trying to build an editor interface (just like a forum "post editor"?

no. It's a simple textarea field i provide for editing the artist's biography.

Yet stripping out unwanted characters while keeping the cursor (caret) in the right place is becomming a real pain in the !!!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"

MIME::Lite TLS Email Encryption - Perl v0.02 beta

 

[ChrisHirst]

Ok, well the code I posted at the links two posts up is exactly what I have written for article writing/editing, signature editing and 'biog' editing on

http://www.modtalk.co.uk.

There is of course a lot of server code that handles bbcode replacements, but that is essentially a fully featured editor.


Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum