Change the text color or background color of a specific line in a text field

[Choi24652308akbg]

The textfield contains multiple lines of text.
Is there a way to change the text color of a specific row where the mouse is positioned or change the background color of that row whenever the mouse is moved over the textfield?
I am unable to find a solution for that.
Example code would be appreciated.
Thank you

[kglad]

as3 or html5?

[Choi24652308akbg]

is AS3

[JoãoCésar · Accepted solution]

Hi.

Here is a simple approach. You can elaborate it more to change the highlight color or you can also use the setTextFormat method to change the character colors instead.

AS3 code:

import flash.display.DisplayObject;
import flash.display.InteractiveObject;
import flash.events.MouseEvent;
import flash.text.TextField;

function main():void
{
	var i:int;
	var child:DisplayObject;
	
	for (i = numChildren - 1; i > -1; i--)
	{
		child = getChildAt(i);
		child.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
		child.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	}
}

function mouseOverHandler(e:MouseEvent):void
{
	stage.focus = e.currentTarget as InteractiveObject;
}

function mouseMoveHandler(e:MouseEvent):void
{
	var edges:Object = getLineEdges(e.currentTarget as TextField, e.localX, e.localY);
	e.currentTarget.setSelection(edges.firstIndex, edges.firstIndex + edges.lineLength);
}

function getLineEdges(tf:TextField, pointerX:Number, pointerY:Number):Object
{
	var charIndex:int = tf.getCharIndexAtPoint(pointerX, pointerY);
	
	if (charIndex == -1)
		return {};
	
	var lineIndex:int = tf.getLineIndexOfChar(charIndex);
	var firstIndex:int = tf.getLineOffset(lineIndex);
	var lineLength:int = tf.getLineLength(lineIndex);
	
	return { firstIndex: firstIndex, lineLength: lineLength };
}

main();

Files / source / code / download:

https://bit.ly/454awMD

I hope it helps.

Regards,

JC

[Choi24652308akbg]

It's resolved.
There was my mistake.
Thank you very much for your help.

[JoãoCésar]

You're welcome!

[kglad]

and learn to use the as3 api.  none of us (i don't believe) have it memorized.

https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html

[Choi24652308akbg]

Thanks for the great sample code.
But, the problem that "bottomScrollV" is not highlighted
When move the mouse to an empty space in the text field or at "MOUSE_OUT"
I have a problem with the list getting back to the top.
Is there any way to solve this problem?

sm.sort();

for (var i: uint = 0; i < sm.length; i++) {
	musicList.appendText(sm[i]+"\n");
}

var mLine:Number = musicList.textHeight/musicList.numLines/2;

DisplayObject(musicList);
addChild(musicList);
DisplayObject(mScrollBar);

musicList.visible = false;
mScrollBar.visible = false;
musicList_btn.border = true;
musicList_btn.borderColor = 0x666666;

musicList_btn.addEventListener(MouseEvent.CLICK, musicListSelect);
var musicListOK: Boolean = false;

function musicListSelect(evt: MouseEvent): void {

	musicListOK = !musicListOK;
	if (musicListOK) {
		musicList.border = true;
		musicList.borderColor = 0x003366;
		musicList.mouseWheelEnabled = true;
		musicList.visible = true;
		mScrollBar.visible = true;
		musicList.addEventListener(MouseEvent.CLICK, selectMusic);
		lineColor();
	} else {
		musicList.border = false;
		musicList.visible = false;
		mScrollBar.visible = false;
		musicList.removeEventListener(MouseEvent.CLICK, selectMusic);
	}
}

function selectMusic(e: MouseEvent): void {

	var index: uint = musicList.getLineIndexAtPoint(e.localX, e.localY-mLine);
	
	if (index >= musicList.bottomScrollV) return;
	if ((index != -1) && (index != n)) {
		n = index;
		musicPlay(sm[n]);
	}
}

function lineColor():void {

	for (var i:int = musicList.numLines - 1; i > -1; i--)  {
		musicList.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
		musicList.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
	}
}

function mouseOverHandler(e:MouseEvent):void {
	stage.focus = e.currentTarget as InteractiveObject;
}

function mouseMoveHandler(e:MouseEvent):void {
	var edges:Object = getLineEdges(e.currentTarget as TextField, e.localX, e.localY);
	e.currentTarget.setSelection(edges.firstIndex, edges.firstIndex + edges.lineLength);
}

function getLineEdges(tf:TextField, pointerX:Number, pointerY:Number):Object {
	var charIndex:int = tf.getCharIndexAtPoint(pointerX, pointerY-mLine);
	
	if (charIndex == -1) return {};

	var lineIndex:int = tf.getLineIndexOfChar(charIndex);
	var firstIndex:int = tf.getLineOffset(lineIndex);
	var lineLength:int = tf.getLineLength(lineIndex);
	
	return { firstIndex: firstIndex, lineLength: lineLength };
}