检测是否输入了使用CSS它在文本 - 网页我访问并没有控制？检测是否输入了使用CSS它在文本 - 网

有没有一种方法来检测通过CSS是否输入了文本呢？ 我已经使用尝试:empty伪类，我已经尝试使用[value=""]这两者都不工作。 我似乎无法找到一个解决这个。

我想这一定是可能的，考虑到我们有伪类:checked和:indeterminate ，这两者都是那种类似的事情。

请注意： 我这样做了“时尚”的风格 ，这是不能利用的JavaScript。

还要注意，时尚的使用，客户端，在用户不控制页面。

Answer 1:

时尚不能做到这一点，因为CSS无法做到这一点。 CSS具有用于无（伪）选择<input>值（S）。 看到：

• W3C的选择规范
• Mozilla的/ Firefox的支持选择
• 跨浏览器，支持CSS3表

的:empty选择仅指子节点，而不是输入值。
[value=""] 不工作; 但仅限于初始状态。 这是因为一个节点的value 属性 （即CSS看到），是不一样的节点的value 属性 （由用户或DOM JavaScript的改变，如提交表单数据）。

除非你只关心初始状态， 你必须使用一个userscript或Greasemonkey的脚本。 还好，这并不难。 下面的脚本将在Chrome浏览器或Firefox与Greasemonkey的或Scriptish安装，或者在任何浏览器支持userscripts（即大多数浏览器，除了IE）。

见CSS的限制加在JavaScript解决方案演示此jsBin页 。

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

Answer 2:

这是可能的，与通常的CSS警告，如果HTML代码进行修改。 如果添加required属性的元素，则该元素将匹配:invalid或:valid根据控制的值是否为空。 如果元素没有value属性（或者它具有value="" ），则控制的值最初是空的，并输入了任何字符（甚至空格）时变为非空。

例：

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

伪归类:valid和:invalid在工作层面草案CSS文件只定义，但支持在浏览器中相当普遍，但在IE中，才出现了IE 10。

如果你想使“空”包括只包含空格的值，你可以添加属性pattern=.*\S.* 。

有（目前），用于直接检测的输入控制是否具有非空值没有CSS选择，因此我们需要做它间接地如上所述。

通常，CSS选择参考标记 ，或在某些情况下，为设定脚本（客户端JavaScript）元件的特性，而不是用户操作。 例如， :empty与标记空内容匹配元件; 所有input元素是在这个意义上不可避免地空。 选择器[value=""]测试的元素是否具有value在标记特性，并且具有空字符串作为它的值。 和:checked和:indeterminate是类似的事情。 他们不会受到实际的用户输入。

Answer 3:

您可以使用:placeholder-shown伪类。 技术上的占位符是必需的，但你可以使用空格来代替。

 input:not(:placeholder-shown) { border-color: green; } input:placeholder-shown { border-color: red; } 

 <input placeholder="Text is required" /> <input placeholder=" " value="This one is valid" /> <input placeholder=" " /> 

Answer 4:

<input onkeyup="this.setAttribute('value', this.value);" />

和

input[value=""]

将工作 ：-）

编辑： http://jsfiddle.net/XwZR2/

Answer 5:

基本上什么每个人都在寻找的是：

减：

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

纯CSS：

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

Answer 6:

你可以样式input[type=text]的不同取决于输入是否有通过造型的占位符文本。 这是不是在这一点上的正式标准，但具有广泛的浏览器支持，虽然有不同的前缀：

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

例如： http://fiddlesalad.com/scss/input-placeholder-css

Answer 7:

使用JS和CSS：不是伪类

  input { font-size: 13px; padding: 5px; width: 100px; } input[value=""] { border: 2px solid #fa0000; } input:not([value=""]) { border: 2px solid #fafa00; } 

 <input type="text" onkeyup="this.setAttribute('value', this.value);" value="" /> 

Answer 8:

简单的CSS：

input[value]:not([value=""])

这段代码是怎么回事，如果输入填充到应用给出的CSS。

Answer 9:

您可以使用placeholder伎俩上述W / O书面required领域。

这个问题required的是，当你写的东西，然后将其删除-输入现在总是红色作为HTML5规范的一部分-那么你就需要按照上面的方法来修复/覆盖它一个CSS。

你可以简单的做事情的W / O required

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
  /* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

典笔： https://codepen.io/arlevi/pen/LBgXjZ

Answer 10:

在有效的选择会做的伎俩。

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

Answer 11:

做到这一点的HTML部分是这样的：

<input type="text" name="Example" placeholder="Example" required/>

所需的参数将要求它具有在输入字段中的文本，以便有效。

Answer 12:

简单的技巧与jQuery和CSS像这样：

JQuery的：

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS：

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }

Answer 13:

是! 你可以用值选择简单的基本属性做到这一点。

使用属性选择器与空白值和应用属性input[value='']

input[value=''] {
    background: red;
}

Answer 14:

这是不可能的CSS。 要实现这一点，你将不得不使用JavaScript（如$("#input").val() == ""

文章来源: Detect if an input has text in it using CSS — on a page I am visiting and do not control?