Question

抱歉英语不好：P

我正在使用ASP.NET

我试图使用我在互联网上找到的JavaScript为我的电话和手机文本字段设置掩码，但JS代码只能在位于我的MasterPage的字段中工作。我没有太多的JS经验（几乎没有），我不知道如何解决这个问题，因为我的Logcat没有错误。

我试图在我的MasterPage的头部，正文和ContentPlaceHolder内部引用它。

这是JS代码：

function mascara(o, f) {
        v_obj = o
        v_fun = f
        setTimeout("execmascara()", 1)
    }
function execmascara() {
v_obj.value = v_fun(v_obj.value)
}
function mtel(v) {
v = v.replace(/\D/g, "");             
v = v.replace(/^(\d{2})(\d)/g, "($1)$2"); 
v = v.replace(/(\d)(\d{4})$/, "$1-$2");   
return v;
}
function id(el) {
return document.getElementById(el);
}
window.onload = function () {

id('txtTelefone').onkeypress = function () { //Located at MasterPage - working
    mascara(this, mtel);
}
id('txtCelular').onkeypress = function () { //Located at MasterPage - working
    mascara(this, mtel);
}
id('telefoneContato').onkeypress = function () { //Located at Contact Page - not working
    mascara(this, mtel);
}
id('txtCelularUser').onkeypress = function () { //Located at User Page - not working
    mascara(this, mtel);
}
id('txtTelefoneUser').onkeypress = function () { //Located at User Page - not working
    mascara(this, mtel);
}
}

正如我之前所说，我试图在某些地方引用我的JS文件，我尝试过的代码是：

<script  src="<%# Page.ResolveClientUrl("../Componentes/js/mascaras.js") %>"></script>

<script src="../Componentes/js/mascaras.js"></script>

正如您所看到的，这些字段位于不同的页面中，我也尝试将代码直接放在页面上，但我没有运气。

我认为我不需要在这里发布我的整个MasterPage，然后我只会放头，但如果存在需要我会编辑帖子。

< / p>

<head runat="server">
<title></title>

<link rel="shortcut icon" href="../imagens/icone.ico" type="image/x-icon" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />


<link href="../Componentes/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="../Componentes/fontawesome/css/font-awesome.min.css" rel="stylesheet" media="screen" />
<link href="../Componentes/css/MasterPage.css" rel="stylesheet" />
<link href="../Fontes/Fontes.css" rel="stylesheet" />
<script src="../Componentes/bootstrap/js/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="../Componentes/bootstrap/js/bootstrap.min.js"></script>

<%--Mask Scripts--%>
<script  src="<%# Page.ResolveClientUrl("../Componentes/js/mascaras.js") %>"></script> 
<script src="../Componentes/js/mascaras.js"></script>


<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
</head>

编辑1

试过这个：

id('<%= txtTelefoneContato.ClientID %>').onkeypress = function () { //Located at Contact Page - Still not working
    mascara(this, mtel);
}
id('<%= txtCelularUser.ClientID %>').onkeypress = function () { //Located at User Page - Still not working
    mascara(this, mtel);
}
id('<%= txtTelefoneUser.ClientID %>').onkeypress = function () { //Located at User Page- Still not working
    mascara(this, mtel);
}

脚本的引用位于MasterPage头部。但问题仍然存在相同

EDIT2

我在检查我的页面时收到了这个：

Error image 1
Error image 2

解决
正如 VDWWD 所解释的那样，我只是将JS代码直接放在.aspx页面上进行修改：

这：

id('txtCelularUser').onkeypress = function () { 
    mascara(this, mtel);
}

为：

id('<%= txtCelularUser.ClientID %>').onkeypress = function () { 
    mascara(this, mtel);
}

提前谢谢

Answer 1

使用具有母版页的JavaScript访问元素时，必须像这样使用它。即使没有母版页也可以使用它。如果您要更改ID，则不必在脚本中更改它。

id('<%= txtTelefoneUser.ClientID %>').onkeypress

如果查看HTML源代码，您会看到元素的ID已从txtTelefoneUser更改为此类ContentPlaceHolder_txtTelefoneUser。 Aspnet添加了一个前缀，以确保每个元素都有唯一的ID。您将在重复数据的元素（如GridView / Repeater / DataList等）中看到相同的前缀用法。

<强>更新

如果你把javascript放在一个外部文件中，你可以像这样在主页面上引用它（假设Componentes是根目录中的文件夹）：

<script src="/Componentes/js/mascaras.js" type="text/javascript"></script>

但是，将<%= txtTelefoneUser.ClientID %>放在外部文件中将无效，仅在.aspx页面上。为了完成这项工作，将这些元素声明为变量，并在外部js文件中使用它们时将它们分配到aspx页面上。

演示下方：

在外部javascript文件中：

var myElement;
function myFunction() {
    myElement.value = "Success!";
}

然后在.aspx页面上：

<script type="text/javascript">
    myElement = document.getElementById("<%= TextBox1.ClientID %>");
</script>

Answer 2

找了半天我发现在javascript中要找到的Content里面的那个区域的元素肯定有前面more undeline的content ID的名字和你要找的元素ID的名字。

示例：

document.querySelector("#ContentPlaceHolder1_img1").setAttribute("src", 123);

JavaScript不适用于我的MasterPage以外的页面以及未链接到该页面的页面

2 个答案: