aleduca/mask-dynamic-alpine.html

## mask-dynamic-alpine.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div x-data="data()">
    <input x-mask:dynamic="changeInput" placeholder="Phone" id="phone">
  </div>

  <script defer src="https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

  <script>
    function data(){
      return {
        phone:'',
        changeInput(input){
          if(input.length <= 14){
            this.phone ='(99) 9999-9999';
          }else{
            this.phone = '(99) 99999-9999';
          }
          return this.phone;
        }
      }
    }
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div x-data="data()">
	<input x-mask:dynamic="changeInput" placeholder="Phone" id="phone">
	</div>

	<script defer src="https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>
	<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

	<script>
	function data(){
	return {
	phone:'',
	changeInput(input){
	if(input.length <= 14){
	this.phone ='(99) 9999-9999';
	}else{
	this.phone = '(99) 99999-9999';
	}
	return this.phone;
	}
	}
	}
	</script>
	</body>
	</html>