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

【问题标题】：JavaScript does not work on pages other than my MasterPage and pages that aren't linked to itJavaScript 不适用于我的 MasterPage 以外的页面和未链接到它的页面
【发布时间】：2017-02-17 09:38:19
【问题描述】：

抱歉英语不好：P

我正在使用 ASP.NET

我正在尝试使用在 Internet 上找到的 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，那么我将只放头部，但如果需要我将编辑帖子。

<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);
}

提前谢谢你

【问题讨论】：

在浏览器的控制台窗口中查看联系页面。有没有错误？
是的，有。 mascaras.js:26 Uncaught TypeError: Cannot set property 'onkeypress' of null --- 还有这个 --- mascaras.js:20 Uncaught TypeError: Cannot set property 'onkeypress' of null
你可以尝试使用 $(document).ready(function(){}) insted of window.load。

标签： javascript html asp.net web master-pages

【解决方案1】：

找了半天发现，在javascript中要查找的Content里面的元素，必须在前面more undeline的content ID的名字和元素ID的名字，你要找的。p >

示例：

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

【讨论】：

【解决方案2】：

在使用具有母版页的 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>

【讨论】：

我应该引用我的脚本吗？因为我已经按照你说的做了，但问题仍然存在。并感谢您的关注。
那我直接把代码放在.aspx页面上可以用第一个例子吗？
是的，没错。如果您编写 javascript 内联，那么它应该可以工作。
PS ContentPlaceHolder 应该在<head> 之外，但在<body> 标记之内。
我是新来的，所以还有一件事，我该如何选择这个作为答案？