Có bộ chọn CSS để phát hiện xem đầu vào có tệp văn bản được chọn không?

0

Để chọn các lĩnh vực có sản phẩm nào bạn có thể thử

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

Tôi đã thử nghiệm nó trên jsfiddle. Có ít nhất, tôi cần phải xác định một thuộc tính giá trị rỗng trên thẻ đầu vào cho nó hoạt động

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

Sử dụng '+' điều hành như bạn đã làm trong ví dụ của bạn sẽ phù hợp với hai đầu vào tập tin riêng biệt, đặt chúng ngay sau khi khác. Nó không kiểm tra hai thuộc tính của cùng một thẻ như bạn muốn.

Nguồn

2010-11-13 22:37:52

+1

Điều tôi muốn chỉ hiển thị 1 đầu vào lúc đầu tiên, sau đó khi một tệp đó đã chọn tệp, hãy hiển thị tệp thứ hai, v.v. Tôi đã thử nghiệm đề xuất của bạn và nó không thay đổi khi tệp được chọn. Nó chỉ xem xét giá trị ban đầu của thuộc tính "value" và không làm gì khi nó thay đổi. – manixrock

+0

@manixrock CSS không thể được sử dụng như thế này - các bộ chọn chỉ được đánh giá một lần khi trang được tải, và đó là nó. Bạn cần Javascript cho số –

+1

@Yi Jiang - Điều này không đúng: 'đầu vào {margin-left: 10px; } đầu vào: được kiểm tra {margin-left: 20px; } '; thêm một hộp kiểm đầu vào, và khi bạn kiểm tra nó, nó sẽ di chuyển sang bên phải; bỏ chọn nó và nó sẽ di chuyển sang trái; điều này chứng minh css được đánh giá ở thời gian chạy trên trang, không chỉ trong khi tải. Tôi đang tìm một cái gì đó như thế này, nhưng thích nghi cho đầu vào tập tin. – manixrock

6

Để mở rộng nhận xét của Yi Jiang, các bộ chọn đối với thuộc tính "giá trị" sẽ không nhận thấy các thay đổi đối với thuộc tính "giá trị". Thuộc tính "value" được gắn với "defaultValue" property, trong khi "value" property không bị ràng buộc với bất kỳ thuộc tính nào (nhờ porneL để chỉ ra điều này).

Lưu ý rằng có mối quan hệ tương tự với thuộc tính "checked" và "defaultChecked" và "checked"; nếu bạn sử dụng công cụ chọn thuộc tính [checked] thay vì lớp giả :checked, bạn sẽ không thấy thay đổi về kiểu khi trạng thái của hộp kiểm thay đổi. Không giống như "gia đình" đã kiểm tra, "giá trị" không có lớp giả tương ứng mà bạn có thể sử dụng.

Hãy thử trang kiểm tra sau đây:

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

Thay đổi giá trị của bất cứ điều gì và phong cách sẽ không thay đổi. Thay đổi lớp của bất cứ điều gì và phong cách sẽ thay đổi. Nếu bạn thêm hàm JS sau và liên kết nó với một sự kiện thay đổi trên một đầu vào, kiểu nền sẽ thay đổi.

 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+'"'); 
      } 
     }

này liên kết với các "giá trị" tài sản cho "giá trị" thuộc tính, vì vậy thông tin cập nhật đến cựu bởi người dùng nhập vào sẽ tuyên truyền để sau này (lập trình thiết lập các "giá trị" bất động sản sẽ không gây ra một sự kiện thay đổi) .

Khi kiểm tra các thuộc tính JS của các đầu vào tệp trước và sau (bằng cách sử dụng tập lệnh sau), chỉ có một thay đổi đáng kể là "giá trị". Từ điều này, tôi nghi ngờ có bất kỳ thuộc tính HTML nào khác thay đổi và do đó có thể được sử dụng trong bộ chọn thuộc tính.

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

Bạn có thể hack cùng một cái gì đó sử dụng một liên kết đến một đoạn không tồn tại và lớp :visited giả, nhưng nó khá nghiêm trọng.

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

Bạn cần phải tạo các mục tiêu chưa được cho phép cho các liên kết mỗi khi trang được tải. Vì bạn phải làm điều đó với máy chủ, bạn không thể làm điều này với sự chắc chắn hoàn toàn, mặc dù bạn có thể nhận được xác suất tạo mục tiêu được truy cập trước đây tùy ý tới 0. Nó cũng không hoạt động trên tất cả các trình duyệt, chẳng hạn như Safari. Tôi nghi ngờ điều này là vì lý do sau từ CSS2 và CSS3:

Lưu ý: Có thể cho tác giả style sheet để lạm dụng: liên kết và: visited pseudo-lớp để xác định các trang web mà người dùng đã ghé thăm mà không cần người dùng của bằng lòng.

Do đó UA có thể coi tất cả các liên kết là liên kết không được đề cập hoặc thực hiện các biện pháp khác để bảo vệ quyền riêng tư của người dùng trong khi hiển thị các liên kết được truy cập và không được truy cập khác nhau.

Bạn có thể liên kết với nhau bằng các bộ chọn khác trên các phần tử khác, nhưng tôi nghi ngờ điều này không thể thực hiện được một cách rõ ràng.

Nguồn

2010-11-14 01:28:31 outis

+6

Để làm rõ: bộ chọn khớp với thuộc tính 'value' * * luôn được đánh giá lại động bất cứ khi nào' giá trị' * thuộc tính * thay đổi và nó hoạt động trong tất cả các trình duyệt hỗ trợ bộ chọn CSS2. CSS không có ngoại lệ ở đây. Phần khó hiểu là thuộc tính 'value' * * không được cập nhật ** để đáp lại các thay đổi' '. 'value' * attribute * ánh xạ tới thuộc tính DOM * mặc địnhValue' * và thuộc tính' value' * * không có thuộc tính DOM * tương ứng *. JS và HTML/CSS là hai thế giới khác nhau. – Kornel

+1

Vâng, nó hoạt động nếu 'defaultValue' được cập nhật thông qua JavaScript (jQuery để đơn giản hóa):' jQuery ('input [type = file]') .change (function (e) {this.defaultValue = this.value;}) ; ' – feeela

6

Một ví dụ đáng ngàn chữ: Display X input, one at a time

Ý tưởng là đơn giản, nếu một đầu vào thiết lập theo yêu cầu là trống rỗng, đó là không hợp lệ. Từ đó, tất cả những gì bạn phải làm là đặt tất cả đầu vào theo yêu cầu và sử dụng lớp giả không hợp lệ. Nên làm việc tuyệt vời với nhãn quá.

Nguồn

2012-08-22 21:28:56 gkr

+0

Ồ, đáng kinh ngạc! –

+0

nhược điểm của điều này là bạn cần phải điền vào tất cả các yếu tố đầu vào, làm cho nó trở nên không thể tin được, nó không thực sự năng động, theo như tôi nghiên cứu, điều này không thể hoàn toàn đạt được mà không cần JS – aleation

+0

Thêm novalidate vào thẻ biểu mẫu cho phép gửi biểu mẫu với đầu vào trống. Không chắc chắn nếu nó là đáng giá. Số lượng đầu vào động sẽ không thể đạt được nếu không có JS. – gkr

Có bộ chọn CSS để phát hiện xem đầu vào có tệp văn bản được chọn không?

Trả lời

Các vấn đề liên quan