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

Question

抱歉英语不好:P

我正在使用 ASP.NET

我正在尝试使用我在 Internet 上找到的 JavaScript 为我的电话和手机文本字段设置掩码，但 JS 代码只能在位于我的字段上工作主页。我对 JS 没有太多经验（几乎 none），我不知道如何解决这个问题，因为我的 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, "()"); 
v = v.replace(/(\d)(\d{4})$/, "-");   
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>

如你所见，字段位于不同的页面，我也尝试将代码直接放在页面上，但我没有运气。

我认为我不需要 post 我的整个 MasterPage 在这里，那么我只放头部，但如果有需要我会编辑 post。

<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里面的元素一定要有content ID的名字在前面 more undeline 和元素ID的名字，你是正在寻找。

示例：

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

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

JavaScript does not work on pages other than my MasterPage and pages that aren't linked to it

javascript

html

asp.net

web

master-pages