[ISSUE-138] Throw warning when multiple elements passed in constructor

README.md

@@ -64,7 +64,7 @@ var cleave = new Cleave('.input-phone', {
 });
 ```
 
-> `.input-element` here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them
+> `.input-element` here is a unique DOM element. If you want to apply Cleave for multiple elements, you need to give different css selectors and apply to each of them, effectively, you might want to create individual instance by a loop, e.g. [loop  solution](https://github.com/nosir/cleave.js/issues/138#issuecomment-268024840) 
 
 More examples: [the demo page](http://nosir.github.io/cleave.js/)
 

bower.json

@@ -3,7 +3,7 @@
   "description":
     "JavaScript library for formatting input text content when you are typing",
   "keywords": ["cleave", "javascript", "html", "form", "input"],
-  "version": "1.4.9",
+  "version": "1.4.10",
   "author": {
     "name": "Max Huang",
     "email": "[email protected]",

dist/cleave-angular.js

@@ -64,17 +64,33 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	var Cleave = function (element, opts) {
 	    var owner = this;
+	    var hasMultipleElements = false;
 
 	    if (typeof element === 'string') {
 	        owner.element = document.querySelector(element);
+	        hasMultipleElements = document.querySelectorAll(element).length > 1;
 	    } else {
-	        owner.element = ((typeof element.length !== 'undefined') && element.length > 0) ? element[0] : element;
+	      if (typeof element.length !== 'undefined' && element.length > 0) {
+	        owner.element = element[0];
+	        hasMultipleElements = element.length > 1;
+	      } else {
+	        owner.element = element;
+	      }
 	    }
 
 	    if (!owner.element) {
 	        throw new Error('[cleave.js] Please check the element');
 	    }
 
+	    if (hasMultipleElements) {
+	      try {
+	        // eslint-disable-next-line
+	        console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
+	      } catch (e) {
+	        // Old IE
+	      }
+	    }
+
 	    opts.initValue = owner.element.value;
 
 	    owner.properties = Cleave.DefaultProperties.assign({}, opts);

dist/cleave.js

@@ -64,17 +64,33 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	var Cleave = function (element, opts) {
 	    var owner = this;
+	    var hasMultipleElements = false;
 
 	    if (typeof element === 'string') {
 	        owner.element = document.querySelector(element);
+	        hasMultipleElements = document.querySelectorAll(element).length > 1;
 	    } else {
-	        owner.element = ((typeof element.length !== 'undefined') && element.length > 0) ? element[0] : element;
+	      if (typeof element.length !== 'undefined' && element.length > 0) {
+	        owner.element = element[0];
+	        hasMultipleElements = element.length > 1;
+	      } else {
+	        owner.element = element;
+	      }
 	    }
 
 	    if (!owner.element) {
 	        throw new Error('[cleave.js] Please check the element');
 	    }
 
+	    if (hasMultipleElements) {
+	      try {
+	        // eslint-disable-next-line
+	        console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
+	      } catch (e) {
+	        // Old IE
+	      }
+	    }
+
 	    opts.initValue = owner.element.value;
 
 	    owner.properties = Cleave.DefaultProperties.assign({}, opts);

package.json

@@ -10,7 +10,7 @@
     "form",
     "input"
   ],
-  "version": "1.4.9",
+  "version": "1.4.10",
   "files": [
     "src",
     "dist",

src/Cleave.js

@@ -8,17 +8,33 @@
  */
 var Cleave = function (element, opts) {
     var owner = this;
+    var hasMultipleElements = false;
 
     if (typeof element === 'string') {
         owner.element = document.querySelector(element);
+        hasMultipleElements = document.querySelectorAll(element).length > 1;
     } else {
-        owner.element = ((typeof element.length !== 'undefined') && element.length > 0) ? element[0] : element;
+      if (typeof element.length !== 'undefined' && element.length > 0) {
+        owner.element = element[0];
+        hasMultipleElements = element.length > 1;
+      } else {
+        owner.element = element;
+      }
     }
 
     if (!owner.element) {
         throw new Error('[cleave.js] Please check the element');
     }
 
+    if (hasMultipleElements) {
+      try {
+        // eslint-disable-next-line
+        console.warn('[cleave.js] Multiple input fields matched, cleave.js will only take the first one.');
+      } catch (e) {
+        // Old IE
+      }
+    }
+
     opts.initValue = owner.element.value;
 
     owner.properties = Cleave.DefaultProperties.assign({}, opts);