Отключите элементы управления, используя JavaScript, если в TextBox есть элементы

У меня есть TextBox, в котором, когда я обновляю страницу, они выглядят div как окна с событием «MouseOver», я пытаюсь сделать следующее:

  • Когда обновить «N» раз страницу, которая в первом случае не покидает эти div только при наведении курсора мыши на текстовое поле

  • при вводе текста в текстовые поля div и метка с красной звездочкой "*" отключена.

Здесь я оставляю исходный код:

<!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>

0
задан 08.04.2016, 23:46
2 ответа

Хороший здесь я оставляю тебе этот кусок кода, уже ты можешь приспосабливать это с именем, которое у тебя есть.

$(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>
0
ответ дан 24.11.2019, 14:37
  • 1
    вопрос, если у него был combobox, как он был бы для этого случая? tendrí которого использовать " document.getElementById (" dropdownlist"); " чтобы делать его select оцените? – IronHeart 12.04.2016, 00:23

Веймар спасибо за твой ответ!! прежде всего извини из-за задержки, в моей стране были президентские выборы, что сделало мало мне сложным отвечать тебе.

Благодаря твоему примеру здесь я оставляю исходный код для того, чтобы сообщество это использовало.

<%@ 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>
0
ответ дан 24.11.2019, 14:37

Теги

Похожие вопросы