1

我有一个页面，其中的代码如下所示：

<form id="editform" class="left " method="post" action="edit-account.php" name="editform">
<ul>
<li id="row_first">
<label for="first">First name</label>
<input id="first" type="text" value="Mike" name="first">
</li>
<li id="row_last">
<label for="last">Last name</label>
<input id="last" type="text" value="" name="last">
</li>
</ul>
<label for="submit_button"> </label>
<input id="submit_button" class="button" type="submit" value="Modify user profile" name="submit_button">
<input type="hidden" name="submitted" value="true">
</form>

我的目标是仅当字段“first”包含默认值“Mike”时才隐藏提交按钮。

在实践中，如果我使用这个 CSS：

#submit_button.button{ display: none; }

这很好地隐藏了按钮，但在所有情况下，不仅当“Mike”是字段“first”的默认值时。

有机会使用 CSS 做到这一点吗？

请注意，我无权访问 HTML 页面。我只能修改外部 CSS 文件，该文件为我要更改的页面设置样式。

或者，如果您有 Javascript 解决方案，我通常可以使用它，因为我可以访问计划用于修改某些表单元素的外部 JS 文件。

4

2 回答 2

2

CSS 不是功能性的，它是用于样式的，因此这在 CSS 中是不可能的。您需要使用 JS 来完成此任务。

更新：

这个 JS 应该适合你：

var element = document.getElementById("first");
var btn = document.getElementById("submit_button"); 

function checkIfMike() {
    if(element.value == "Mike") {
        btn.style.display = "none";
    } else {
        btn.style.display = "block";
    } 
}

checkIfMike();
element.addEventListener("keyup", checkIfMike);
于 2013-04-20T21:15:40.300 回答
1

虽然 CSS 确实允许您基于属性值来定位兄弟元素，但这只会让您的解决方案走到一半。例如，以下将隐藏您的提交按钮：

#first[value='Mike'] ~ #submit_button {
    display: none;
}

这会将与值为 的任何#submit_button元素在同一容器中的任何#first元素的 display 属性设置为 none Mike。这适用于最初隐藏按钮，以及在用户键入键名时隐藏它。但是，由于缺少不等于运算符，当值不是目标名称时，CSS 无法帮助我们恢复可见性。

我们的其他选择是使用 JavaScript。我们将创建一个执行此评估的函数，并根据名字字段的值显示或隐藏提交按钮：

(function () {

    "use strict";

    // Reference all of our key elements, and values
    var name = "Mike",
        form = document.getElementById("editform"),
        inpt = document.getElementById("first"),
        sbmt = document.getElementById("submit_button");

    // A function to toggle visibility based on field value
    function setVisibility() {
        sbmt.style.display = (inpt.value.trim() === name) ? "none" : "";
    }

    // Call this function whenever input occurs on the field
    form.addEventListener("input", setVisibility, false);

    // Fire it once upon load for initial evaluation
    setVisibility();

}());

这应该可以让您根据用户提供的数据隐藏/显示提交按钮。

小提琴：http: //jsfiddle.net/jonathansampson/j2MRQ/

于 2013-04-20T21:16:03.490 回答