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>

私の目標は、フィールド「最初」にデフォルト値「マイク」が含まれている場合にのみ、送信ボタンを非表示にすることです。

実際には、この CSS を使用すると:

#submit_button.button{ display: none; }

これはボタンをうまく隠しますが、「マイク」がフィールド「最初」のデフォルト値である場合だけではありません。

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同じコンテナー内の要素の表示プロパティが none になります。これは、ユーザーがキー名を入力したときにボタンを非表示にするだけでなく、最初にボタンを非表示にするためにも機能します。しかし、等しくない演算子がないため、値がターゲット名でない場合、CSS は可視性を復元するのに役立ちません。#firstMike

その他のオプションは、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 に答える