Deactivate controls using JavaScript if there are elements in a TextBox

Question

Deactivate controls using JavaScript if there are elements in a TextBox

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have this TextBox in which when I update the page you can see div as windows with a "MouseOver" event, what I try to do is the following:

When I refresh "N" times the page that in the first instance these div do not go only when I pass the mouse through the text box
When entering text in the text boxes, the div is disabled and the label is marked with an asterisk "*" in red.

Here I leave the source code:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DEMO</title>

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
    .description {
        z-index: auto;
        position: absolute;
        left: 193px;
        /*margin-top: 180px;*/
        top: 0px;
        padding: 3px 6px;
        border: 1px solid #caac09;
        background: #fff7b4;
        color: #4b3904;
        font-family: Segoe UI Light;
        font-size: 10pt;
        text-decoration: none;
        font-weight: normal;
    }

    .DesApeMa {
        z-index: auto;
        position: absolute;
        left: 424px;
        top: 0px;
        padding: 3px 6px;
        border: 1px solid #caac09;
        background: #fff7b4;
        color: #4b3904;
        font-family: Segoe UI Light;
        font-size: 10pt;
        text-decoration: none;
        font-weight: normal;
    }

    .DesNom {
        z-index: auto;
        position: absolute;
        left: 702px;
        top: 0px;
        padding: 3px 6px;
        border: 1px solid #caac09;
        background: #fff7b4;
        color: #4b3904;
        font-family: Segoe UI Light;
        font-size: 10pt;
        text-decoration: none;
        font-weight: normal;
    }

    .LabelApellido {
        color: red;
        font-size: 13pt;
        margin-top: 3px;
        margin-left: 221px;
        margin-top: -20px;
        position: absolute;
    }

    .LabelApellidoMa {
        color: red;
        font-size: 13pt;
        margin-top: 0px;
        margin-left: -12px;
        position: absolute;
    }

    .LabelNombre {
        color: red;
        font-size: 13pt;
        margin-top: -5px;
        margin-top: -20px;
        margin-left: 361px;
        position: absolute;
    }


    .PopUpApePA, PopUpApeMA, PopUpNOM {
    }
</style>
</head>
<body>
<form runat="server">
    <div id="main-wrapper">
        <table id="TblDemo">
            <tr>
                <td style="border: 0px solid" colspan="7">
                    <table id="tblDatosPersonales" class="FontText">
                        <tr>
                            <td class="TextAlign" colspan="1" rowspan="2" width="31px">01.</td>
                            <td colspan="1" width="230px">
                                <div class="PopUpApePA">
                                    <asp:TextBox ID="txtapepaterno" runat="server" Width="230px" CssClass="TextBoxBorder"></asp:TextBox>
                                    <div class="description">No puede estar en blanco</div>
                                    <asp:Label ID="lblapepaterno" runat="server" Text="*" CssClass="LabelApellido"></asp:Label>
                                </div>
                            </td>
                            <td colspan="2" width="281px">
                                <div class="PopUpApeMA">
                                    <asp:TextBox ID="txtapematerno" runat="server" Width="274px" CssClass="TextBoxBorder"></asp:TextBox>
                                    <div class="DesApeMa">No puede estar en blanco</div>
                                    <asp:Label ID="lblapematerno" runat="server" Text="*" CssClass="LabelApellidoMa"></asp:Label>
                                </div>
                            </td>
                            <td colspan="3" width="450px">
                                <div class="PopUpNOM">
                                    <asp:TextBox ID="txtnombre" runat="server" Width="468px" CssClass="TextBoxBorder"></asp:TextBox>
                                    <div class="DesNom">No puede estar en blanco</div>
                                    <asp:Label ID="lblnombre" runat="server" Text="*" CssClass="LabelNombre"></asp:Label>
                                </div>
                            </td>
                        </tr>
                        <tr class="TextAlign">
                            <td colspan="1">Apellido Paterno</td>
                            <td colspan="2">Apellido Materno</td>
                            <td colspan="3">Nombres</td>
                        </tr>
                    </table>
    </div>
    </form>
</body>

<script>
$(".PopUpApePA").mouseover(function () {
    $(this).children(".description").show();
}).mouseout(function () {
    $(this).children(".description").hide();
});

$(".PopUpApeMA").mouseover(function () {
    $(this).children(".DesApeMa").show();
}).mouseout(function () {
    $(this).children(".DesApeMa").hide();
});

$(".PopUpNOM").mouseover(function () {
    $(this).children(".DesNom").show();
}).mouseout(function () {
    $(this).children(".DesNom").hide();
});
</script>

javascript html5 asp.net

asked by IronHeart 08.04.2016 в 22:32

source

2 answers

0

Weimar, thank you for your answer, especially the apology for the delay, in my country there were presidential elections, which made it difficult for me to answer you.

Thanks to your example here I leave the source code for the community to use it.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

DEMO

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<style type="text/css">
    .description {
        z-index: auto;
        position: absolute;
        left: 193px;
        /*margin-top: 180px;*/
        top: 0px;
        padding: 3px 6px;
        border: 1px solid #caac09;
        background: #fff7b4;
        color: #4b3904;
        font-family: Segoe UI Light;
        font-size: 10pt;
        text-decoration: none;
        font-weight: normal;
    }

    .DesApeMa {
        z-index: auto;
        position: absolute;
        left: 424px;
        top: 0px;
        padding: 3px 6px;
        border: 1px solid #caac09;
        background: #fff7b4;
        color: #4b3904;
        font-family: Segoe UI Light;
        font-size: 10pt;
        text-decoration: none;
        font-weight: normal;
    }

    .DesNom {
        z-index: auto;
        position: absolute;
        left: 702px;
        top: 0px;
        padding: 3px 6px;
        border: 1px solid #caac09;
        background: #fff7b4;
        color: #4b3904;
        font-family: Segoe UI Light;
        font-size: 10pt;
        text-decoration: none;
        font-weight: normal;
    }

    .LabelApellido {
        color: red;
        font-size: 13pt;
        margin-top: 3px;
        margin-left: 221px;
        margin-top: -20px;
        position: absolute;
    }

    .LabelApellidoMa {
        color: red;
        font-size: 13pt;
        margin-top: 0px;
        margin-left: -12px;
        position: absolute;
    }

    .LabelNombre {
        color: red;
        font-size: 13pt;
        margin-top: -5px;
        margin-top: -20px;
        margin-left: 361px;
        position: absolute;
    }


    .PopUpApePA, PopUpApeMA, PopUpNOM {
    }
</style>
</head>
<body>
<form runat="server">
    <div id="main-wrapper">
        <table id="TblDemo">
            <tr>
                <td style="border: 0px solid" colspan="7">
                    <table id="tblDatosPersonales" class="FontText">
                        <tr>
                            <td class="TextAlign" colspan="1" rowspan="2" width="31px">01.</td>
                            <td colspan="1" width="230px">
                                <asp:TextBox ID="txtapepaterno" runat="server" Width="230px" CssClass="TextBoxBorder"></asp:TextBox>
                                <div class="PopUpApePA" id="PopUpApePA">
                                    <div class="description">No puede estar en blanco</div>
                                    <asp:Label ID="lblapepaterno" runat="server" Text="*" CssClass="LabelApellido"></asp:Label>
                                </div>
                            </td>
                            <td colspan="2" width="281px">
                                <asp:TextBox ID="txtapematerno" runat="server" Width="274px" CssClass="TextBoxBorder"></asp:TextBox>
                                <div class="PopUpApeMA" id="PopUpApeMA">
                                    <div class="DesApeMa">No puede estar en blanco</div>
                                    <asp:Label ID="lblapematerno" runat="server" Text="*" CssClass="LabelApellidoMa"></asp:Label>
                                </div>
                            </td>
                            <td colspan="3" width="450px">
                                <asp:TextBox ID="txtnombre" runat="server" Width="468px" CssClass="TextBoxBorder"></asp:TextBox>
                                <div class="PopUpNOM" id="PopUpNOM">
                                    <div class="DesNom">No puede estar en blanco</div>
                                    <asp:Label ID="lblnombre" runat="server" Text="*" CssClass="LabelNombre"></asp:Label>
                                </div>
                            </td>
                        </tr>
                        <tr class="TextAlign">
                            <td colspan="1">Apellido Paterno</td>
                            <td colspan="2">Apellido Materno</td>
                            <td colspan="3">Nombres</td>
                        </tr>
                    </table>
    </div>
</form>

<script>
$(document).ready(function () {
    $("#PopUpApePA").hide();
    $("#txtapepaterno").mouseover(function () {
        if ($(this).val().length > 0) {
            $("#PopUpApePA").hide();
        }
        else {
            $("#PopUpApePA").show();
        }
    })
    .on("keyup", function () {
        if ($(this).val().length > 0) {
            $("#PopUpApePA").hide();
        }
        else {
            $("#PopUpApePA").show();
        }
    });
});

$(document).ready(function () {
    $("#PopUpApeMA").hide();
    $("#txtapematerno").mouseover(function () {
        if ($(this).val().length > 0) {
            $("#PopUpApeMA").hide();
        }
        else {
            $("#PopUpApeMA").show();
        }
    })
    .on("keyup", function () {
        if ($(this).val().length > 0) {
            $("#PopUpApeMA").hide();
        }
        else {
            $("#PopUpApeMA").show();
        }
    });
});

$(document).ready(function () {
    $("#PopUpNOM").hide();
    $("#txtnombre").mouseover(function () {
        if ($(this).val().length > 0) {
            $("#PopUpApeMA").hide();
        }
        else {
            $("#PopUpNOM").show();
        }
    })
    .on("keyup", function () {
        if ($(this).val().length > 0) {
            $("#PopUpNOM").hide();
        }
        else {
            $("#PopUpNOM").show();
        }
    });
});
</script>
<script>
$(".PopUpApePA").mouseover(function () {
    $(this).children(".description").show();
}).mouseout(function () {
    $(this).children(".description").hide();
});

$(".PopUpApeMA").mouseover(function () {
    $(this).children(".DesApeMa").show();
}).mouseout(function () {
    $(this).children(".DesApeMa").hide();
});

$(".PopUpNOM").mouseover(function () {
    $(this).children(".DesNom").show();
}).mouseout(function () {
    $(this).children(".DesNom").hide();
});
</script>
</html>

answered by 11.04.2016 в 18:41

Problems showing a PDF file in the browser I need help with splits and modifying text in Netbeans JAVA

score 0 · Accepted Answer

Well here I leave this piece of code, you can adapt it with the name you have.

$(document).ready(function () {
  $("#validateName").hide();
  $("#name").mouseover(function () {                
    if ($(this).val().length > 0) {
      $("#validateName").hide();
    }
    else {
      $("#validateName").show();
    }
  })
  .on("keyup", function () {                
    if ($(this).val().length > 0) {
      $("#validateName").hide();
    }
    else {
      $("#validateName").show();
    }
  });
});

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>input demo</title> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
        <input type="text" id="name" />
        
        <div id="validateName">
            <span>No puede estar en blanco</span>
            <span style="color:red">*</span>
        </div>   
</body>
</html>