是否有一個CSS選擇器來檢測輸入是否有選定的文本文件？

0

要選擇空字段，你可以嘗試

input[type=file][value=""] { 
    background-color: red; 
}

我測試的jsfiddle。有至少，我需要輸入標籤定義一個空值屬性，它的工作

<input type="file" id="test" value="">

使用「+」操作符與您在您的例子做會匹配兩個單獨的文件輸入，一個向右之後。它不會檢查您看起來想要的相同標記的兩個屬性。

來源

2010-11-13 22:37:52

+1

我想要的只是首先顯示1個輸入，然後一旦有一個文件被選中，顯示第二個，依此類推。我測試了你的建議，一旦文件被選中，它就不會改變。它只查看「value」屬性的初始值，當它改變時什麼都不做。 – manixrock 2010-11-13 23:57:09

+0

@manixrock CSS不能像這樣使用 - 選擇器只在加載頁面時評估一次，就是這樣。您需要使用Javascript才能做到這一點 – 2010-11-14 00:15:04

+1

@Yi Jiang - 這不是真的：'input {margin-left：10px; } input：checked {margin-left：20px; }';添加一個複選框的輸入，當你檢查它會移動到右側;取消選中它，它會移動到左側;這證明css是在運行時在頁面上進行評估的，而不僅僅是在加載時。我正在尋找這樣的東西，但適合文件輸入。 – manixrock 2010-11-14 00:23:43

6

要擴展Yi Jiang的評論，針對「value」屬性的選擇器不會注意到「value」屬性的更改。「價值」屬性綁定到"defaultValue" property，而"value" property沒有綁定到任何屬性（感謝porneL指出了這一點）。

請注意，與「checked」屬性和「defaultChecked」和「checked」屬性有類似的關係;如果您使用屬性選擇器[checked]而不是僞類:checked，則當複選框的狀態更改時，您將看不到樣式更改。與「checked」系列不同，「value」沒有相應的僞類，您可以使用它。

嘗試以下測試頁：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title>Dynamic attribute selectors</title> 
    <style type="text/css"> 
    input:not([value]), div:not([value]) { 
     background-color: #F88; 
    } 

    input[value], div[value] { 
     border: 5px solid #8F8; 
    } 
    input[value=""], div[value=""] { 
     border: 5px solid #F8F; 
    } 

    input:not([value=""]), div:not([value=""]) { 
     color: blue; 
     border-style: dashed; 
    } 

    *.big { 
     font-size: 200%; 
    } 
    </style> 
    <script> 
     function getElt() { 
      var id=prompt("Enter ID of element", "d1"); 
      if (id) { 
       return document.getElementById(id); 
      } else { 
       return {className: ''}; 
      } 
     } 

     function embiggen() { 
      getElt().className="big"; 
      return false; 
     } 

     function smallify() { 
      getElt().className=""; 
      return false; 
     } 
    </script> 
    </head> 

    <body> 
    <form method="post" enctype="multipart/form-data"> 
     <div id="d1">no value</div> 
     <div id="d2" value="">empty value</div> 
     <div id="d3" value="some">some value</div> 
     <p><label for="foo">foo:</label> <input name="foo" id="foo" /></p> 
     <p><label for="bam">bam:</label> <input name="bam" id="bam" value="bug-AWWK" /></p> 
     <p><label for="file">File to upload:</label> <input type="file" name="file" id="file" onchange="setValueAttr(this)"/></p> 
     <input type="button" value="Embiggen" onclick="return embiggen()" /> 
     <input type="button" value="Smallify" onclick="return smallify()" /> 
    </body> 
</html>

改變任何事物的價值和風格不會改變。改變任何東西的類，風格會改變。如果添加以下JS函數並將其綁定到輸入上的更改事件，背景樣式將會更改。

 function bindValue(elt) { 
      var oldVal=elt.getAttribute('value'); 
      elt.setAttribute('value', elt.value); 
      var newVal=elt.getAttribute('value'); 
      if (oldVal != newVal) { 
       alert('Had to change value from "'+oldVal+'" to "'+newVal+'"'); 
      } 
     }

此結合「值」屬性設置爲「value」屬性，所以更新前者通過用戶輸入將傳播到後者（編程設置「值」屬性不會導致改變事件）。

在檢查文件輸入前後的JS屬性（通過使用下面的腳本）時，唯一有可改變的是「value」。從這個角度來看，我懷疑是否有其他的HTML屬性會發生變化，因此可以在屬性選擇器中使用。

<script> 
    var file = {blank: {}, diff: {}}; 
    var fInput = document.getElementById('file'); 
    for (p in fInput) { 
    try { 
     file.blank[p] = fInput[p]; 
    } catch (err) { 
     file.blank[p] = "Error: setting '"+p+"' resulted in '"+err+"'";   
    } 
    } 

    function fileDiff() { 
    for (p in fInput) { 
     try { 
     if (file.blank[p] != fInput[p]) { 
      file.diff[p] = {orig: file.blank[p], now: fInput[p]}; 
     } 
     } catch (err) { 
     //file.diff[p] = "Error: accessing '"+p+"' resulted in '"+err+"'";   
     } 
    } 

    } 

    if (fInput.addEventListener) { 
    fInput.addEventListener('change', fileDiff, false); 
    } else if (fInput.attachEvent) { 
    fInput.attachEvent('onchange', fileDiff); 
    } else { 
    fInput.onchange = fileDiff; 
    } 
</script>

您可以通過鏈接到一個不存在的片段和:visited僞類一起下鍋的東西，但它是非常令人震驚的。

<style> 
a input { 
    display: none; 
} 
:not(a) + a input, 
a:visited + a input 
{ 
    display: block /* or "inline" */ ; 
} 

</style> 
... 
<a href="#asuhacrpbt"><input type="file" ... /></a> 
<a href="#cmupbnhhpw"><input type="file" ... /></a> 
<a href="#mcltahcrlh"><input type="file" ... /></a>

您需要在每次加載頁面時爲鏈接生成未訪問的目標。由於您必須在服務器端進行此操作，因此您無法完全確定這一點，儘管您可能會將產生之前訪問的目標的概率任意接近0.它也不適用於所有瀏覽器，例如蘋果瀏覽器。我懷疑這是由於從CSS2和CSS3如下：

注：這是可能的樣式表作者濫用：link和：visited僞類，以確定用戶未經用戶訪問了哪些網站同意。

因此，UA可能會將所有鏈接視爲未訪問鏈接，或實施其他措施以保護用戶隱私，同時呈現不同訪問和未訪問鏈接。

您可能能夠使用其他元素上的其他選擇器來破解一些東西，但我懷疑這不能幹淨地完成。

來源

2010-11-14 01:28:31 outis

+6

澄清：匹配'value'屬性*的選擇符總是在'value' *屬性*改變時動態地重新評估，並且它支持所有支持CSS2選擇器的瀏覽器。 CSS在這裏不會例外。令人困惑的部分是''value * *屬性*'**未更新**以響應''的變化。 'value' * attribute *映射到'defaultValue' DOM * property *，'value' * property *沒有相應的DOM *屬性*。 JS和HTML/CSS是兩個不同的世界。 – Kornel 2010-11-14 16:55:59

+1

那麼，如果'defaultValue'通過JavaScript更新（簡化jQuery）：'jQuery（'input [type = file]'）.change（function（e）{this.defaultValue = this.value;}） ;' – feeela 2012-09-26 18:55:46

6

一個例子值得十萬字：Display X input, one at a time

的想法很簡單，如果根據需要設置的輸入是空的，它是無效的。從那裏，你所要做的就是根據需要設置所有輸入，並使用：無效僞類。應該與標籤一起工作。

來源

2012-08-22 21:28:56 gkr

+0

哦，不可思議！ – 2013-02-20 14:54:43

+0

這個缺點是你需要填充所有的輸入，這使得它不可行，它不是真正的動態，據我研究，這是不能完全實現沒有JS – aleation 2013-07-29 14:42:56

+0

添加novalidate到表單標籤允許發送表單與空輸入。不知道它是否值得。無論如何，動態的輸入數量是無法實現的。 – gkr 2013-07-30 10:52:54

是否有一個CSS選擇器來檢測輸入是否有選定的文本文件？

回答

相關問題