Attempt to make text in number boxes unselectable.

controller.js

@@ -19,6 +19,13 @@ var Controller = function() {
 		elem.unselectable = "on";
 	}
     
+	this.makeSelectable = function(elem) {
+		elem.onselectstart = function() { };
+		elem.style.MozUserSelect = "auto";
+		elem.style.KhtmlUserSelect = "auto";
+		elem.unselectable = "off";
+	}
+    
     this.domElement = document.createElement('div');
     this.domElement.setAttribute('class', 'guidat-controller ' + this.type);
 

controller.number.js

@@ -43,12 +43,17 @@ var NumberController = function() {
     }, false);
     document.addEventListener('mouseup', function(e) {
         isClicked = false;
+      	_this.makeSelectable(GUI.domElement); 
+		_this.makeSelectable(button);
     }, false);
     document.addEventListener('mousemove', function(e) {
         if(isClicked) {
             e.preventDefault();
+        	_this.makeUnselectable(GUI.domElement);
+        	_this.makeUnselectable(button);
+      
             py = y;
-            y  = e.offsetY;
+            y = e.offsetY;
             var dy = y - py;
             if(dy < 0) {
                 if(max != null)
@@ -64,8 +69,8 @@ var NumberController = function() {
             }
             button.value = inc;
             _this.setValue(inc);
-        }
         return false;
+        }
     }, false);
     
     this.__defineSetter__("position", function(val) {

controller.string.js

@@ -11,6 +11,7 @@ var StringController = function() {
     var initialValue = this.getValue();
     
     input.setAttribute('value', initialValue);
+    input.setAttribute('spellcheck', 'false');
     this.domElement.addEventListener('mouseup', function() {
     	input.focus();
     	input.select();

demo.html

@@ -3,12 +3,13 @@
 <link href="gui.css" media="screen" rel="stylesheet" type="text/css" />
 <link href="demo.css" media="screen" rel="stylesheet" type="text/css" />
 <!--<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>-->
+
+<script type="text/javascript" src="gui.js"></script>
 <script type="text/javascript" src="controller.js"></script>
 <script type="text/javascript" src="controller.string.js"></script>
 <script type="text/javascript" src="controller.number.js"></script>
 <script type="text/javascript" src="controller.boolean.js"></script>
 <script type="text/javascript" src="controller.function.js"></script>
-<script type="text/javascript" src="gui.js"></script>
 <script id="demo" type="text/javascript">
 var controllableObject = 
    {   
@@ -41,8 +42,6 @@ window.onload = function() {
    
    // Creates a checkbox
    GUI.add(controllableObject, "booleanProperty");
-   // Creates a checkbox
-   GUI.add(controllableObject, "anotherBooleanProperty");
    
    // Creates a button
    GUI.add(controllableObject, "functionProperty");

gui.css

@@ -78,7 +78,6 @@
 }
 .guidat-controller.number input[type=number] {
 	width: 45px;
-	cursor: ns-resize;
 }
 
 .guidat-controller.boolean input { 
@@ -88,7 +87,7 @@ margin-top: 6px;
 
 
 .guidat-controller:last-child {
-	
+	border-bottom: none;
 	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 	-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
 	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);

gui.js

@@ -17,8 +17,8 @@ var GUI = new function() {
 	
 		// Have we already added this?
 		if (alreadyControlled(object, propertyName)) {
-			error("Controller for \"" + propertyName+"\" already added.");
+	//		error("Controller for \"" + propertyName+"\" already added.");
-			return;
+	//		return;
 		}
 	
 		var value = object[propertyName];
@@ -102,7 +102,7 @@ var GUI = new function() {
 
 	// GUI ... GUI
 	
-	var domElement;
+	this.domElement = null;
 	var controllerContainer;
 	var started = false;
 	var open = false;
@@ -112,8 +112,8 @@ var GUI = new function() {
 	
 	this.start = function() {
 		
-		domElement = document.createElement('div');
+		this.domElement = document.createElement('div');
-		domElement.setAttribute('id', 'guidat');
+		this.domElement.setAttribute('id', 'guidat');
 		
 		controllerContainer = document.createElement('div');
 		controllerContainer.setAttribute('id', 'guidat-controllers');
@@ -127,12 +127,12 @@ var GUI = new function() {
 			e.preventDefault();
 		}, false);
 		
-		domElement.appendChild(controllerContainer);
+		this.domElement.appendChild(controllerContainer);
-		domElement.appendChild(toggleButton);
+		this.domElement.appendChild(toggleButton);
 		
-		domElement.style.marginTop = -domElementMarginTop+"px";
+		this.domElement.style.marginTop = -domElementMarginTop+"px";
 		
-		document.body.appendChild(domElement);
+		document.body.appendChild(this.domElement);
 		
 		started = true;
 		
@@ -149,13 +149,13 @@ var GUI = new function() {
 	};
 	
 	this.show = function() {
-		domElement.style.marginTop = 0+"px";
+		this.domElement.style.marginTop = 0+"px";
 		toggleButton.innerHTML = "Hide Controls";
 		open = true;
 	}
 	
 	this.hide = function() {
-		domElement.style.marginTop = -domElementMarginTop+"px";
+		this.domElement.style.marginTop = -domElementMarginTop+"px";
 		toggleButton.innerHTML = "Show Controls";
 		open = false;
 	}