CSS를 사용하여 입력에 텍스트가 있는지 탐지합니다. -- 내가 방문 중이고 제어하지 않는 페이지에서?
CSS를 통해 입력에 텍스트가 있는지 여부를 감지할 수 있는 방법이 있습니까?저는 그것을 사용해 보았습니다.:empty사이비 클래스, 그리고 저는 사용해 보았습니다.[value=""]둘 다 효과가 없었습니다.저는 이것에 대한 단 하나의 해결책을 찾을 수 없을 것 같습니다.
저는 이것이 가능해야 한다고 생각합니다, 우리가 사이비 클래스가 있다는 것을 고려할 때.:checked,그리고.:indeterminate둘 다 비슷한 것 같아요
참고:저는 자바스크립트를 활용할 수 없는 "스타일리쉬" 스타일을 위해 이것을 하고 있습니다.
또한 사용자가 제어할 수 없는 페이지에서 클라이언트 측 스타일이 사용됩니다.
당신은 할 수 .: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=" " />일반적인 CSS 경고와 HTML 코드를 수정할 수 있는지 여부로 가능합니다.를 required 속성을 요에대 속성그러, 일치니다합요소가와 일치합니다.:invalid또는:valid컨트롤 값이 비어 있는지 여부에 따라 달라집니다.에 소에없는이 없는 value 속또성(있속성이음는또있)음▁attribute)을 포함함)value=""), 컨트롤 값은 처음에는 비어 있으며 문자(공백)를 입력하면 비어 있지 않습니다.
예:
<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>
유사 클래스 및 는 Working Draft 수준의 CSS 문서에만 정의되어 있지만 IE에서 IE 10과 함께 제공되었다는 점을 제외하면 브라우저에서 지원이 다소 광범위합니다.
을 "으로 만들고 " ▁attribute다▁if있▁the니습▁that▁you▁only수" 속성을 추가할 수 .pattern=.*\S.*.
(현재) 입력 컨트롤에 비어 있지 않은 값이 있는지 여부를 직접 감지하는 CSS 선택기가 없으므로 위에서 설명한 대로 간접적으로 수행해야 합니다.
일반적으로 CSS 선택기는 사용자 작업이 아닌 마크업 또는 경우에 따라 스크립팅(클라이언트 측 JavaScript)으로 설정된 요소 속성을 나타냅니다.예를들면,:empty빈 합니다. all " " " 마 요 일 합 " 니 " 다 " 치 " 소 " 내 " 과 " 가 " 빈 " 용 " 크 " 의 " 업 " 모두 일치합니다.input이런 의미에서 요소는 필연적으로 비어 있습니다.가 "입니다.[value=""]요소에 다음이 있는지 여부를 검정합니다.value속성을 마크업하고 빈 문자열을 값으로 사용합니다.:checked그리고.:indeterminate비슷한 것들입니다.실제 사용자 입력의 영향을 받지 않습니다.
CSS는 이것을 할 수 없기 때문에 스타일리시는 이것을 할 수 없습니다.CSS에는 값에 대한 (의사) 선택기가 없습니다.참조:
그:empty선택기는 하위 노드만 참조하고 입력 값은 참조하지 않습니다.
[value=""] 작동하지만 초기 상태에서만 작동합니다.이것은 노드가value 속성(CSS가 보는)이 노드의 속성과 동일하지 않습니다.value 속성(사용자 또는 DOM Javascript에 의해 변경되어 양식 데이터로 제출됨).
초기 상태에만 관심이 있는 경우를 제외하고는 사용자 스크립트 또는 그리스몽키 스크립트를 사용해야 합니다.다행히 이것은 어렵지 않습니다.다음 스크립트는 Chrome 또는 Greasemonkey 또는 Scriptish가 설치된 Firefox 또는 사용자 스크립트를 지원하는 브라우저(IE를 제외한 대부분의 브라우저)에서 작동합니다.
이 jsBin 페이지에서 CSS의 한계와 자바스크립트 솔루션에 대한 데모를 참조하십시오.
// ==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";
}
기본적으로 모두가 찾고 있는 것은 다음과 같습니다.
감소:
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;}
<input onkeyup="this.setAttribute('value', this.value);" />
그리고.
input[value=""]
작동할 것입니다 :-)
편집: http://jsfiddle.net/XwZR2/
자리 표시자를 사용하여 다음을 사용할 수 있습니다.
input:not(:placeholder-shown) {
border: 1px solid red;
}
당신은 할 수 .placeholder에 쓴 것과 required밭.밭.
의 required당신이 무언가를 썼을 때 그것을 삭제했다는 것입니다. - 이제 입력은 항상 HTML5 사양의 일부로 빨간색이 될 것입니다. - 그러면 당신은 그것을 수정/재지정하기 위해 위에 쓰여진 것처럼 CSS가 필요할 것입니다.
작업을 간편하게 수행할 수 있습니다.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
성사용 placeholder 클래스 및유클래스사스래placeholder-shown입력에 텍스트가 있는지 탐지하는 적절한 방법입니다.
예:
<input type="email" placeholder=" " required>
<label>Email</label>
input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
top : -4em
left : -0.2em
font-size : 0.9em
}
단순 css:
input[value]:not([value=""])
이 코드는 입력이 가득 찬 경우 페이지 로드 시 지정된 CSS를 적용합니다.
자바스크립트 없이도 실제로 이것을 할 수 있는 방법이 있습니다.
당신이 경할우정을 한다면.<input>의requiredtrue, CSS, 가 있는 할 수 .:valid꼬리표를 달다
참조:
input {
background: red;
}
input:valid {
background: lightgreen;
}<input type="text" required>스타일링 가능합니다.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
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="" />
올바른 선택자가 트릭을 수행합니다.
<input type="text" class="myText" required="required" />
.myText {
//default style of input
}
.myText:valid {
//style when input has text
}
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;
}
HTML 부분에서 다음과 같이 수행합니다.
<input type="text" name="Example" placeholder="Example" required/>
필수 매개 변수를 사용하려면 입력 필드에 텍스트가 있어야 합니다.
예! 값 선택기를 사용하여 간단한 기본 속성으로 수행할 수 있습니다.
빈 값으로 속성 선택기 사용 및 속성 적용
input[value=''] {
background: red;
}
여기 있어요..faseHTML 코드의 입력 클래스입니다.
div.fase > input:focus:required:invalid {
color: red;
border-color: red;
box-shadow: 0 0 6px red;
}
div.fase input:focus:required:valid,
input:focus:required:placeholder-shown {
border-color: rgb(22, 172, 22);
box-shadow: 0 0 8px rgb(28, 150, 28);
}
div.fase input:valid {
border-color: rgb(47, 148, 49);
}
이것은 CSS에서는 불가능합니다.하려면 JavaScript()를 .$("#input").val() == "").
언급URL : https://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no
'source' 카테고리의 다른 글
| s3.upload()에 스트림 파이프 연결 (0) | 2023.09.01 |
|---|---|
| PowerShell 원격 - 정책에서 사용자 자격 증명 위임을 허용하지 않습니다. (0) | 2023.09.01 |
| Visual Studio Code 내에서 Git 사용자 변경 (0) | 2023.09.01 |
| http 컨텍스트를 사용하지 않고 응용 프로그램 경로를 가져옵니다.(asp.net ) (0) | 2023.09.01 |
| 조인된 테이블의 행을 기본 쿼리의 필드 이름 및 값으로 지정하시겠습니까? (0) | 2023.09.01 |