Javascript Text Area Question 2

[dwightk12345]

Hello,

I have a text area with some fixed values. I need to over-ride the default behaviour. Normally, when you click on a value it gets highlighted. But then if you click on another value, the new one is highlighted and the previous one loses it's selection.

My Text Area
Fixed Value 1
Fixed Value 2
...

I want it to maintain it's selection until and unless there is an explicit click to de-select it. As well, I want to disable the drag select and CTRL select. So the only way to select is by click and the only way to de-select is by another click.

Can anyone give me a code snippet on how to do this.

Thanks.

 

[BillyRayPreachersSon]

Normally, when you click on a value it gets highlighted.

Er... if by "value" you mean "contents of the text area", then no, it does not.

Perhaps you have some extra code to do this - in which case, you'd need to start by explaining it... but by default, if I click in a textarea, nothing gets highlighted.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dwightk12345]

Sorry,

I think I am using the wrong terminology. What I meant is a multi-select box. Basically those HTML controls where you a fixed set of values and you can select a bunch of them together.

 

[Nietecht]

I don't know if it's good enough for you dwight, but you can have multiple selections in a multiple select box while by holding the ctrl-key while clicking new options.

 

[dwightk12345]

No that's the default behaviour I am trying to over ride. The problem is that if you have to make a lengthy selection and if you by mistake let go of the CTRL button, you lose the whole set of selected values. As well, I need to ensure that people don't just blindly select the entire list.

If they can only click on the selection and then have to physically click to uncheck it, then you can go through a fairly long list of values without having to worry that one mistaken click will cause you to lose the entire selection - which is what the default multi-select box behaviour is.

 

[Nietecht]

Well, it's an interesting idea, so I had a go at it...
I'm disappointed that I couldn't find any way to capture and prevent the selecting of an option.
IE7 wouldn't even let me detect an option click at all it seemed.

I got something working, but I'm not entirely satisfied since you can clearly see the deselecting and reselecting of the options.

    (function () {
        var selectBox = document.getElementById("selectBoxId");
    
        var selColl = {};
        
        function collect(e) {
            e = e || event;
            var target = e.target || e.srcElement;
            var options = selectBox.getElementsByTagName("option");
            var i, l;
            l = options.length;
            //collect all selected indexes: this is before the change
            for (i = 0; i < l; i++) {
                if (options[i].selected) {
                    selColl[i] = true;
                }
            }
        }
        
        function restore(e) {
            e = e || event;
            var target = e.target || e.srcElement;
            var options = selectBox.getElementsByTagName("option");
            var i, l, x;
            l = options.length;
            //collect the (single left) selected index: that one was clicked
            for (i = 0; i < l; i++) {
                if (options[i].selected && selColl[i]) {    //deselect and remove from list if it was previously clicked
                    delete selColl[i];
                    options[i].selected = false;
                }
            }
            //restore all previously selected options
            for (x in selColl) {
                if (selColl.hasOwnProperty(x)) {
                    selectBox.options[x].selected = true;
                }
            }
            selColl = {};
        }
                
        selectBox.onmousedown = collect;
        selectBox.onclick = restore;
    })();

Put that code at the bottom of your page.
At the top of the code, change the selectBox value to your select box and it should kinda work right off the bat (or so I hope).

What it does is pretty simple, onmousedown it will register all selected options (this is before the browser changes anything), and onclick (that is after the browser changes the values), it will restore all the previously selected options.

This just works for normal clicks... If the user drags for multiple selects or uses ctrl-click, the default behaviour will still kick in. I don't think you can prevent that.

I hope it helps If the blinking of the deselecting/reselecting is unacceptable, maybe look for another selection method, like a list of select boxes.

 

[Nietecht]

Ehm, with "a list of select boxes", I did mean "a list of check boxes". (Where's the 'edit post' button anyway?)

 

[BillyRayPreachersSon]

I posted this code in another thread a while back - I just can't find the thread. Here's the code anyway:

<html>
<head>
	<script type="text/javascript">

		var optionsState = [];

		function rememberState(selObj) {

			var opts = selObj.options;

			// Have we already populated our state array?
			if (optionsState.length == 0) {
				// No - so do so now
				for (var loop=0; loop<opts.length; loop++) {
					optionsState[loop] = opts[loop].selected;
				}
			} else {
				// Yes - so track the last change

				// First detect what item was clicked
				var clickedIndex = -1;
				for (var loop=0; loop<opts.length; loop++) {
					if (opts[loop].selected) {
						clickedIndex = loop;
						break;
					}
				}

				// Was that item already selected? If so, unselect it, otherwise, select it
				optionsState[clickedIndex] = !optionsState[clickedIndex];

				// Now re-populate the select element
				for (var loop=0; loop<optionsState.length; loop++) {
					opts[loop].selected = optionsState[loop];
				}
			}
		}

	</script>
</head>
<body>
	<form>
		<select multiple="true" size="15" onchange="rememberState(this);">
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
			<option>Option 4</option>
			<option>Option 5</option>
			<option>Option 6</option>
			<option>Option 7</option>
			<option>Option 8</option>
			<option>Option 9</option>
			<option>Option 10</option>
		</select>
	</form>
</body>
</html>

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

Here it was:

thread215-1389858

Found using a quick search ;-)

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[dwightk12345]

Guys Thanks a lot both of you are the bomb!!

 

[Nietecht]

Ye, Billy's code is fine just as well, more compact even.

Although, if I must point something out, it's that Billy's code does not let you deselect your last/single selected option (meaning that once you selected something, you cannot have no selection anymore).

Of course, that may not be an issue in your case.