Oddiy JS bilan kirish maydoniga e'tibor berganda, blur fon

Qanday qilib buni sof JS bilan amalga oshirishim mumkin? Menga jQuery yoki sof CSS-dan foydalanishga ruxsat berilmaydi, shuning uchun men faqat bitta JavaScript-mulohaza hisoblayman.

I have this demo, for example: http://codepen.io/anon/pen/jBEMRK

HTML:

<body>

   <input type="text">

</body>

CSS:

body {
  background: red;
}

input {
  width: 50%;
}

Men erishmoqchi bo'lgan narsa - bu kirish maydonini bosganimda, kirish maydonini markazga qo'yishni va fonni/fonadi/blurasiga ega bo'lgan (body) fonini yaxshi ko'rishni istayman ). Albatta, muayyan shaffoflik bilan, albatta.

1
So'rovda sizning kodingizni yuborishingiz kerak - foydalanuvchilarning sizning kodingizni o'qib, yordam berishga harakat qilishlarini kutish mumkin emas
qo'shib qo'ydi muallif Darren Sweeney, manba
So'rovda sizning kodingizni yuborishingiz kerak - foydalanuvchilarning sizning kodingizni o'qib, yordam berishga harakat qilishlarini kutish mumkin emas
qo'shib qo'ydi muallif Darren Sweeney, manba
Qanday JavaScript-ni ishlating?
qo'shib qo'ydi muallif j08691, manba
Qanday JavaScript-ni ishlating?
qo'shib qo'ydi muallif j08691, manba

7 javoblar

Quyidagi kabi biror narsa qilishingiz mumkin. Asosan, siz div ni joylashtirishingiz mumkin va keyin matnni diqqat markazida bo'lganda o'sha div uchun ba'zi dim/blur funksiyasini ishga tushirishingiz mumkin.

http://codepen.io/anon/pen/LWEbYG

HTML

<body>

<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
  <div id="blur"></div> 
</body>

CSS

body {
  background: red;
}

input {
  width: 50%;
}
.blury {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: -1;
}

JS

function onFocus() {
  document.getElementById('blur').setAttribute('class', 'blury');
}

function onFocusOut() {
  document.getElementById('blur').setAttribute('class', '');
}
1
qo'shib qo'ydi
Tashakkur. Sizning javobingizni qabul qildim.
qo'shib qo'ydi muallif Siyah, manba
To'g'ri, shunga qaramay, men buni eng oddiy narsa deb hisoblayman.
qo'shib qo'ydi muallif Siyah, manba
Hmm, bu butun ekranni bulg'ovchi emas, shuning uchun chap tomon hali ham qizil bo'lgani ko'rinadi. Men sizni yuqoriga ko'targan edim.
qo'shib qo'ydi muallif Siyah, manba
Rahmat, lekin bu muammo bilan, agar kirish maydoniga diqqat qilishni to'xtatsangiz (boshqa joyga bosing), loyqalik u erda qoladi ... bu yaxshi emas.
qo'shib qo'ydi muallif Siyah, manba
Men buni yangiladim. Endi u to'liq ekran bo'lishi kerak.
qo'shib qo'ydi muallif mwilson, manba
Kod qalamini yangiladim. hozir kerakli narsa bo'lishi kerak
qo'shib qo'ydi muallif mwilson, manba
Siz ikkinchi qismni so'ramadingiz.
qo'shib qo'ydi muallif mwilson, manba

Quyidagi kabi biror narsa qilishingiz mumkin. Asosan, siz div ni joylashtirishingiz mumkin va keyin matnni diqqat markazida bo'lganda o'sha div uchun ba'zi dim/blur funksiyasini ishga tushirishingiz mumkin.

http://codepen.io/anon/pen/LWEbYG

HTML

<body>

<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
  <div id="blur"></div> 
</body>

CSS

body {
  background: red;
}

input {
  width: 50%;
}
.blury {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: -1;
}

JS

function onFocus() {
  document.getElementById('blur').setAttribute('class', 'blury');
}

function onFocusOut() {
  document.getElementById('blur').setAttribute('class', '');
}
1
qo'shib qo'ydi
Tashakkur. Sizning javobingizni qabul qildim.
qo'shib qo'ydi muallif Siyah, manba
To'g'ri, shunga qaramay, men buni eng oddiy narsa deb hisoblayman.
qo'shib qo'ydi muallif Siyah, manba
Hmm, bu butun ekranni bulg'ovchi emas, shuning uchun chap tomon hali ham qizil bo'lgani ko'rinadi. Men sizni yuqoriga ko'targan edim.
qo'shib qo'ydi muallif Siyah, manba
Rahmat, lekin bu muammo bilan, agar kirish maydoniga diqqat qilishni to'xtatsangiz (boshqa joyga bosing), loyqalik u erda qoladi ... bu yaxshi emas.
qo'shib qo'ydi muallif Siyah, manba
Men buni yangiladim. Endi u to'liq ekran bo'lishi kerak.
qo'shib qo'ydi muallif mwilson, manba
Siz ikkinchi qismni so'ramadingiz.
qo'shib qo'ydi muallif mwilson, manba
Kod qalamini yangiladim. hozir kerakli narsa bo'lishi kerak
qo'shib qo'ydi muallif mwilson, manba

Quyidagi kabi biror narsa qilishingiz mumkin. Asosan, siz div ni joylashtirishingiz mumkin va keyin matnni diqqat markazida bo'lganda o'sha div uchun ba'zi dim/blur funksiyasini ishga tushirishingiz mumkin.

http://codepen.io/anon/pen/LWEbYG

HTML

<body>

<input id="txtBox" onfocus="onFocus()" onfocusout="onFocusOut()" type="text">
  <div id="blur"></div> 
</body>

CSS

body {
  background: red;
}

input {
  width: 50%;
}
.blury {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  top: 0;
  left: 0;
  opacity: 0.7;
  z-index: -1;
}

JS

function onFocus() {
  document.getElementById('blur').setAttribute('class', 'blury');
}

function onFocusOut() {
  document.getElementById('blur').setAttribute('class', '');
}
1
qo'shib qo'ydi
Tashakkur. Sizning javobingizni qabul qildim.
qo'shib qo'ydi muallif Siyah, manba
To'g'ri, shunga qaramay, men buni eng oddiy narsa deb hisoblayman.
qo'shib qo'ydi muallif Siyah, manba
Hmm, bu butun ekranni bulg'ovchi emas, shuning uchun chap tomon hali ham qizil bo'lgani ko'rinadi. Men sizni yuqoriga ko'targan edim.
qo'shib qo'ydi muallif Siyah, manba
Rahmat, lekin bu muammo bilan, agar kirish maydoniga diqqat qilishni to'xtatsangiz (boshqa joyga bosing), loyqalik u erda qoladi ... bu yaxshi emas.
qo'shib qo'ydi muallif Siyah, manba
Siz ikkinchi qismni so'ramadingiz.
qo'shib qo'ydi muallif mwilson, manba
Men buni yangiladim. Endi u to'liq ekran bo'lishi kerak.
qo'shib qo'ydi muallif mwilson, manba
Kod qalamini yangiladim. hozir kerakli narsa bo'lishi kerak
qo'shib qo'ydi muallif mwilson, manba

Buni oddiygina qilishingiz mumkin.

HTML qismi:

<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">

JS qismi:

function blurIt(val){
    if (val) document.body.style.background = "black";
    else document.body.style.background = "red";
}
0
qo'shib qo'ydi
Ha, lekin bu hamma narsani buzadi ... jumladan, kirish maydonining o'zi. Biz bundan qochamizmi?
qo'shib qo'ydi muallif Siyah, manba
Menga yoqadi, lekin fon rangi o'rniga shaffoflikni ishlatmoqchiman. Bu ham mumkinmi?
qo'shib qo'ydi muallif Siyah, manba
Ha, albatta! Buning o'rniga style.background, faqat style.opacity = "0.5" bilan, 1.0 shaffof, 0.0 shaffof/ko'rinmas bo'lishi mumkin.
qo'shib qo'ydi muallif A. Kutluozen, manba
Albatta, u hamma narsani bulg'aydi, chunki u hujjatni buzadi, chunki asosan hamma narsa ko'rinadi. Document.getElementByClassName ("allowedToBeBlurred") ... document.getElementByClassName ("allowedToBeBlurred") ... tryToBeBlurred deb nomlangan bir sinf yarating va bulg'anishni istagan har qanday elementga biriktirilsin.
qo'shib qo'ydi muallif A. Kutluozen, manba

Buni oddiygina qilishingiz mumkin.

HTML qismi:

<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">

JS qismi:

function blurIt(val){
    if (val) document.body.style.background = "black";
    else document.body.style.background = "red";
}
0
qo'shib qo'ydi
Ha, lekin bu hamma narsani buzadi ... jumladan, kirish maydonining o'zi. Biz bundan qochamizmi?
qo'shib qo'ydi muallif Siyah, manba
Menga yoqadi, lekin fon rangi o'rniga shaffoflikni ishlatmoqchiman. Bu ham mumkinmi?
qo'shib qo'ydi muallif Siyah, manba
Ha, albatta! Buning o'rniga style.background, faqat style.opacity = "0.5" bilan, 1.0 shaffof, 0.0 shaffof/ko'rinmas bo'lishi mumkin.
qo'shib qo'ydi muallif A. Kutluozen, manba
Albatta, u hamma narsani bulg'aydi, chunki u hujjatni buzadi, chunki asosan hamma narsa ko'rinadi. Document.getElementByClassName ("allowedToBeBlurred") ... document.getElementByClassName ("allowedToBeBlurred") ... tryToBeBlurred deb nomlangan bir sinf yarating va bulg'anishni istagan har qanday elementga biriktirilsin.
qo'shib qo'ydi muallif A. Kutluozen, manba

Buni oddiygina qilishingiz mumkin.

HTML qismi:

<input type="text" onblur="blurIt(false)" onfocus="blurIt(true)">

JS qismi:

function blurIt(val){
    if (val) document.body.style.background = "black";
    else document.body.style.background = "red";
}
0
qo'shib qo'ydi
Ha, lekin bu hamma narsani buzadi ... jumladan, kirish maydonining o'zi. Biz bundan qochamizmi?
qo'shib qo'ydi muallif Siyah, manba
Menga yoqadi, lekin fon rangi o'rniga shaffoflikni ishlatmoqchiman. Bu ham mumkinmi?
qo'shib qo'ydi muallif Siyah, manba
Ha, albatta! Buning o'rniga style.background, faqat style.opacity = "0.5" bilan, 1.0 shaffof, 0.0 shaffof/ko'rinmas bo'lishi mumkin.
qo'shib qo'ydi muallif A. Kutluozen, manba
Albatta, u hamma narsani bulg'aydi, chunki u hujjatni buzadi, chunki asosan hamma narsa ko'rinadi. Document.getElementByClassName ("allowedToBeBlurred") ... document.getElementByClassName ("allowedToBeBlurred") ... tryToBeBlurred deb nomlangan bir sinf yarating va bulg'anishni istagan har qanday elementga biriktirilsin.
qo'shib qo'ydi muallif A. Kutluozen, manba

bulaniq da bo'lgani kabi blur degan ma'noni anglatadigan bo'lsak, webkitfilter xususiyatidan foydalanishingiz mumkin.

Misol:

HTML:

<input type="text" onfocus="blurBackground(true)" onblur="blurBackground(false)" />

JS:

function blurBackground(doIt) { 
    if (doIt) document.body.style.webkitFilter = "blur(5px)";
    else document.body.style.webkitFilter = "blur(0)";
}
0
qo'shib qo'ydi
Orqa fonni taranglashtirmoqchiman va boshqa hamma narsalar input maydonidan tashqari. Shunday qilib, kirish maydoni ta'kidlanadi ... va u endi kirish maydoniga yo'naltirilganda, uni yana normal holatga qaytarishni istayman.
qo'shib qo'ydi muallif Siyah, manba
Kodingizni sinab ko'rdingizmi? codepen.io/anon/pen/jBEMRK Unga qarang ... kirish maydonini loyqalashmoqda Lekin men buni xohlamayman. Men uning asosiy maydonini emas, tananing fonini bulg'anishini istayman ...
qo'shib qo'ydi muallif Siyah, manba
Bu so'zlar: "kutilmagan nishon"
qo'shib qo'ydi muallif Siyah, manba
Afsuski. qilish - albatta kalit so'z (facepalm). Faqat boshqa argumentlar nomidan foydalaning.
qo'shib qo'ydi muallif Tobbe Widner, manba
Mening javobimga javoban. Orqa fonda (va uning barcha tarkiblari kirish maydonidan tashqari) bulutni nazarda tutasizmi yoki uni faqat kamroq ko'rinadigan qilish yoki ustiga "bulutli" qatlam qo'yishni xohlaysizmi?
qo'shib qo'ydi muallif Tobbe Widner, manba
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb