Question

我有一个Syncfusion MaskedTextBox

@Html.EJS().MaskedTextBox("Name").Width("100%").Value(Model.Name).Render()

如果文本框为空，我想更改文本框的边框颜色。我在做

document.getElementById("Name").style.borderColor.red;

但是它不起作用。任何帮助将不胜感激。

Answer 1

您的脚本的border属性格式不正确，请更改为此

document.getElementById("Name").style.border = "1px solid red";

Answer 2

设置EJS程序包，然后尝试实现所需的结果后，请找到以下代码。我在最后尝试并测试过。如果输入框为空，则会显示红色边框，否则将隐藏。您可以使用其他.toggleClass()之类的JQuery方法向元素添加适当的样式。我希望这会有所帮助。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            document.getElementById("button").onclick = function () {

                var input = document.getElementById('Name');
                if (input.value.length == "") {
                    input.style.border = "1px solid red";
                }
                else {
                    input.style.border = "none";
                }
            };
        });
    </script>
</head>
<body>
    <div class="row">
        <div class="col-md-4">
            <h2>Getting started</h2>
            @Html.EJS().MaskedTextBox("Name").Width("100%").Render()

            @Html.EJS().Button("button").Content("Click Me").Render()
        </div>
    </div>
</body>
</html>

无法更改Syncfusion MaskedTextBox的边框颜色

2 个答案: