Mascara simples com js

[TASF]

boa tarde tenho a funcao que cria uma mascara para o telefone com JS

function mascara(t, mask){
 var i = t.value.length;

 var saida = mask.substring(2,1);
 var texto = mask.substring(i);
 if (texto.substring(0,1) != saida){

	 t.value += texto.substring(0,1);
 }
 }

// e a chamada e assim 

<label for="tel1User"> Telefone 1 <input type="tel"  name="tel1User" id="tel1User" required="required" placeholder="Telefone c/ DDD"onkeypress="mascara(this, '(##) ###-#####')" maxlength="14"> </label>

ela esta funcionando mas não como eu gostaria, pois ele mostra o numero assim (xx)xxxx-xxxx ->tudo junto
e eu gostaria que fosse assim (xx) xxxx-xxxx ->com espaço apos o DDD

porem não estou conseguindo criar esse espaço apos o DDD, alguém tem alguma dica de como fazer esse espaço apos o DDD?

desde já grato pelas dicas

[alcionj]

Segue .js e um .html …

    function Mascara(o,f){
        v_obj=o
        v_fun=f
        setTimeout("execmascara()",1)
    }
    
    /*Função que Executa os objetos*/
    function execmascara(){
        v_obj.value=v_fun(v_obj.value)
    }
    
    function leech(v){
        v=v.replace(/o/gi,"0")
        v=v.replace(/i/gi,"1")
        v=v.replace(/z/gi,"2")
        v=v.replace(/e/gi,"3")
        v=v.replace(/a/gi,"4")
        v=v.replace(/s/gi,"5")
        v=v.replace(/t/gi,"7")
        return v
    }
    
    function Integer(v){
        return v.replace(/\D/g,"")
    }
    
    /*Função que padroniza telefone (11) 4184-1241*/
    function Telefone(v){
        v=v.replace(/\D/g,"")                 
        v=v.replace(/^(\d\d)(\d)/g,"($1) $2") 
        v=v.replace(/(\d{4})(\d)/,"$1-$2")    
        return v
    }
    
    /*Função que padroniza telefone (11) 41841241*/
    function TelefoneCall(v){
        v=v.replace(/\D/g,"")                 
        v=v.replace(/^(\d\d)(\d)/g,"($1) $2")    
        return v
    }
    
    /*Função que padroniza CPF*/
    function Cpf(v){
        v=v.replace(/\D/g,"")                    
        v=v.replace(/(\d{3})(\d)/,"$1.$2")       
        v=v.replace(/(\d{3})(\d)/,"$1.$2")       
                                                 
        v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2") 
        return v
    }
    
    /*Função que padroniza CEP*/
    function Cep(v){
        v=v.replace(/D/g,"")                
        v=v.replace(/^(\d{5})(\d)/,"$1-$2") 
        return v
    }
    
    /*Função que padroniza CNPJ*/
    function Cnpj(v){
        v=v.replace(/\D/g,"")                   
        v=v.replace(/^(\d{2})(\d)/,"$1.$2")     
        v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3") 
        v=v.replace(/\.(\d{3})(\d)/,".$1/$2")           
        v=v.replace(/(\d{4})(\d)/,"$1-$2")              
        return v
    }
    
    /*Função que permite apenas numeros Romanos*/
    function Romanos(v){
        v=v.toUpperCase()             
        v=v.replace(/[^IVXLCDM]/g,"") 
        
        while(v.replace(/^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/,"")!="")
            v=v.replace(/.$/,"")
        return v
    }
    
    /*Função que padroniza o Site*/
    function Site(v){
        v=v.replace(/^http:\/\/?/,"")
        dominio=v
        caminho=""
        if(v.indexOf("/")>-1)
            dominio=v.split("/")[0]
            caminho=v.replace(/[^\/]*/,"")
            dominio=dominio.replace(/[^\w\.\+-:@]/g,"")
            caminho=caminho.replace(/[^\w\d\+-@:\?&=%\(\)\.]/g,"")
            caminho=caminho.replace(/([\?&])=/,"$1")
        if(caminho!="")dominio=dominio.replace(/\.+$/,"")
            v="http://"+dominio+caminho
        return v
    }

    /*Função que padroniza DATA*/
    function Data(v){
        v=v.replace(/\D/g,"") 
        v=v.replace(/(\d{2})(\d)/,"$1/$2") 
        v=v.replace(/(\d{2})(\d)/,"$1/$2") 
        return v
    }
    
    /*Função que padroniza DATA*/
    function Hora(v){
        v=v.replace(/\D/g,"") 
        v=v.replace(/(\d{2})(\d)/,"$1:$2")  
        return v
    }
    
    /*Função que padroniza valor monétario*/
    function Valor(v){
        v=v.replace(/\D/g,"") //Remove tudo o que não é dígito
        v=v.replace(/^([0-9]{3}\.?){3}-[0-9]{2}$/,"$1.$2");
        //v=v.replace(/(\d{3})(\d)/g,"$1,$2")
        v=v.replace(/(\d)(\d{2})$/,"$1.$2") //Coloca ponto antes dos 2 últimos digitos
        return v
    }
    
    /*Função que padroniza Area*/
    function Area(v){
        v=v.replace(/\D/g,"") 
        v=v.replace(/(\d)(\d{2})$/,"$1.$2") 
        return v
        
    }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- JS DAS MASCARAS -->
<script src="mascara.js"></script>
</head>
<body>
<table width="100%" border="0">
 
    <tr bgcolor="#e1e1e1">
        <td width="13%">[Só numeros]</td>
        <td width="87%"><input name="int" type="text" id="int" onKeyDown="Mascara(this,Integer);" onKeyPress="Mascara(this,Integer);" onKeyUp="Mascara(this,Integer);"></td>
    </tr>
    <tr>
        <td width="13%">[Telefone]</td>
        <td width="87%"><input name="tel" type="text" id="tel" maxlength="14" onKeyDown="Mascara(this,Telefone);" onKeyPress="Mascara(this,Telefone);" onKeyUp="Mascara(this,Telefone);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[CPF]</td>
        <td width="87%"><input name="cpf" type="text" id="cpf" maxlength="14" onKeyDown="Mascara(this,Cpf);" onKeyPress="Mascara(this,Cpf);" onKeyUp="Mascara(this,Cpf);"></td>
    </tr>
    <tr>
        <td width="13%">[Cep]</td>
        <td width="87%"><input name="cep" type="text" id="cep" maxlength="9" onKeyDown="Mascara(this,Cep);" onKeyPress="Mascara(this,Cep);" onKeyUp="Mascara(this,Cep);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[CNPJ]</td>
        <td width="87%"><input name="cnpj" type="text" id="cnpj" maxlength="18" onKeyDown="Mascara(this,Cnpj);" onKeyPress="Mascara(this,Cnpj);" onKeyUp="Mascara(this,Cnpj);"></td>
    </tr>
    <tr>
        <td width="13%">[Romanos]</td>
        <td width="87%"><input name="rom" type="text" id="rom"  onKeyDown="Mascara(this,Romanos);" onKeyPress="Mascara(this,Romanos);" onKeyUp="Mascara(this,Romanos);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[Site]</td>
        <td width="87%"><input name="sit" type="text" id="sit"  onKeyDown="Mascara(this,Site);" onKeyPress="Mascara(this,Site);" onKeyUp="Mascara(this,Site);"></td>
    </tr>
    <tr>
        <td width="13%">[Data]</td>
        <td width="87%"><input name="date" type="text" id="date" maxlength="10" onKeyDown="Mascara(this,Data);" onKeyPress="Mascara(this,Data);" onKeyUp="Mascara(this,Data);"></td>
    </tr>
    <tr bgcolor="#e1e1e1">
        <td width="13%">[Area Valor]</td>
        <td width="87%"><input name="arevalo" type="text" id="arevalo"  onKeyDown="Mascara(this,Area);" onKeyPress="Mascara(this,Area);" onKeyUp="Mascara(this,Area);"></td>
    </tr>
</table>
</body>
</html>