Estoy tratando de tener algunas entradas de archivo, y que solo aparezcan si la anterior se ha llenado. Esto también puede usar css 3.¿Hay un selector CSS para detectar si una entrada tiene un archivo de texto seleccionado?
Para seleccionar los campos vacíos se puede tratar
input[type=file][value=""] {
background-color: red;
}
he comprobado en jsFiddle. Hay al menos, que necesitaba para definir un atributo valor vacío en la etiqueta de entrada para que funcione
<input type="file" id="test" value="">
Usando el operador '+' como se ha hecho en su ejemplo se correspondería con dos entradas de archivos independientes, uno a la derecha después del otro No examina dos atributos de la misma etiqueta que parece querer.
Para ampliar el comentario de Yi Jiang, los selectores contra el atributo "valor" no notarán cambios en la propiedad "valor". El atributo "valor" está vinculado al "defaultValue" property, mientras que el "value" property no está vinculado a ningún atributo (gracias a porneL para señalar esto).
Tenga en cuenta que existe una relación similar con el atributo "checked" y las propiedades "defaultChecked" y "checked"; si utiliza un selector de atributo [checked] en lugar de la pseudoclase :checked, no verá el cambio de estilo cuando cambie el estado de una casilla de verificación. A diferencia de la familia "verificada", "valor" no tiene una pseudoclase correspondiente que pueda usar.
intente lo siguiente página de prueba:
<!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>
Cambiar el valor de nada y el estilo no va a cambiar. Cambie la clase de cualquier cosa y el estilo cambiará. Si agrega la siguiente función JS y la vincula a un evento de cambio en una entrada, el estilo de fondo cambiará.
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+'"');
}
}
Esto se une la propiedad "valor" para el atributo "valor", por lo que cambios a la antigua por la entrada del usuario se propagarán a este último (ajuste de programación la propiedad "valor" no provocará un evento de cambio) .
Al examinar las propiedades JS de las entradas de archivo antes y después (mediante el uso del siguiente script), el único con un cambio apreciable fue "value". A partir de esto, dudo que haya otros atributos de HTML que cambien y, por lo tanto, podrían usarse en un selector de atributos.
<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>
Puede hackear algo juntos mediante un enlace a un fragmento inexistente y la clase de pseudo :visited, pero es bastante atroz.
<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>
Necesitará generar objetivos no visitados para los enlaces cada vez que se cargue la página. Como tendrías que hacerlo del lado del servidor, no podrías hacer esto con total certeza, aunque podrías obtener la probabilidad de generar un objetivo previamente visitado arbitrariamente cerca de 0. Tampoco funciona en todos los navegadores, como Safari. Sospecho que esto se debe a lo siguiente de CSS2 y CSS3:
Nota: Es posible que los autores de hojas de estilo que abusan del: link y: visited pseudo-clases para determinar los sitios que un usuario ha visitado sin que el usuario de consentimiento.
Los AU pueden, por lo tanto, tratar todos los enlaces como enlaces no visitados, o implementar otras medidas para preservar la privacidad del usuario mientras representan los enlaces visitados y no visitados de forma diferente.
Es posible que pueda hackear algo utilizando otros selectores de otros elementos, pero sospecho que esto no se puede hacer de forma limpia.
Para aclarar: los selectores que coinciden con el atributo 'valor' * siempre se vuelven a evaluar dinámicamente cuando el atributo' value' * cambia, y funciona en todos los navegadores compatibles con los selectores de CSS2. CSS no hace excepción aquí. La parte confusa es que el atributo 'value' * ** no está actualizado ** en respuesta a los cambios' '. 'value' * attribute * asigna a' defaultValue' DOM * property *, y 'value' * property * no tiene el atributo DOM * correspondiente *. JS y HTML/CSS son dos mundos diferentes. – Kornel
Bueno, funciona si el 'defaultValue' se actualiza a través de JavaScript (jQuery para simplificación):' jQuery ('input [type = file]') .change (function (e) {this.defaultValue = this.value;}) ; ' – feeela
Un ejemplo digno de millares palabras: Display X input, one at a time
La idea es simple, si un conjunto de entrada según sea necesario está vacío, es inválido. A partir de ahí, todo lo que tiene que hacer es configurar todas las entradas según sea necesario y usar la pseudoclase inválida. Debería funcionar muy bien con la etiqueta también.
¡Oh, increíble! –
la desventaja de esto es que debe completar todas las entradas, por lo que es inviable, no es realmente dinámico, en la medida en que investigué esto no se puede lograr completamente sin JS – aleation
Agregar novalidate a la etiqueta del formulario permitir enviar el formulario con entrada vacía No estoy seguro de si vale la pena. El número dinámico de entrada no será alcanzable sin JS de todos modos. – gkr
Lo que quiero es mostrar solo 1 entrada al principio, luego una vez que se ha seleccionado un archivo, mostrar el segundo, y así sucesivamente. Probé tu sugerencia y no cambia una vez que se selecciona el archivo. Solo mira el valor inicial del atributo "valor" y no hace nada cuando cambia. – manixrock
@manixrock CSS no se puede usar así: los selectores solo se evalúan una vez cuando se carga la página, y eso es todo. Necesitarás Javascript para esto –
@Yi Jiang - Eso no es del todo cierto: 'input {margin-left: 10px; } entrada: marcada {margin-left: 20px; } '; agregue una entrada de casilla de verificación, y cuando la revise se moverá hacia la derecha; desmárquelo y se moverá hacia la izquierda; esto prueba que CSS se evalúa en tiempo de ejecución en la página, no solo durante la carga. Estoy buscando algo como esto, pero adaptado para entradas de archivos. – manixrock