10/10/2018, 10:43

cho hỏi hiệu ứng input text đổi màu này

khi mình click vào vào ô input type text --> sẽthay đổi màu nên input đó sang vàng nhạt , sau đó khi mình lick ra phía ngoài ô text box đó thì nó trở lại màu mặc định ban đầu

giốing nhu cái khung đang nhập của joomla đó
mấy bác chỉ giúp

honnhienh viết 12:46 ngày 10/10/2018

chắc dùng javascript có cái sự kiện onfocus và onblur đó để thay đổi.

dokhacluan viết 12:55 ngày 10/10/2018

thì là vậy , nhưng cụ thể là sao mới dc

honnhienh viết 12:43 ngày 10/10/2018

ah.

dung jquert nha code zay:
#container{
border:1px solid while;
}

$('#container').focur(function(){
$(this).css({'border':'2px solid red'});

});
$('#container').blur(function(){
$(this).css({'border':'1px solid while'});

});
test dùm. tại làm biếng mới cái dreamweaver lên

dokhacluan viết 12:50 ngày 10/10/2018

cậu chịu khó chut cậu ơi , viết vậy khó hỉu quá

honnhienh viết 12:59 ngày 10/10/2018

cậu nhúng jquery vào
<script type='text/javascript'>
$(document).ready(function(){
$('input[type^=text]').focur(function(){
$(this).css({'border':'2px solid red'});

});
$('input[type^=text]').blur(function(){
$(this).css({'border':'1px solid while'});

});
)};
</script>
<form action="">
<label for="name">Name</label>
<input name="username" type="text" /></br>
<label for="pass">Name</label>
<input name="username" type="text" />
</form>

[=========> Bổ sung bài viết <=========]

tai vì đang làm việc một số chương trình nặng quá không giám mởi thêm nữa.

thuyduongcd viết 12:44 ngày 10/10/2018

Code:

<input type="text" onfocus="this.style.backgroundColor='#fffde8'" onblur="this.style.backgroundColor='#ffffff'" />

dokhacluan viết 12:51 ngày 10/10/2018

thank bac thuyduong , coi bộ giống nhu cái lần truoc bác trả lời cho mình quá

bác cho mình hỏi thêm cái sự kiện onblur , chính xác là nó thế nào vậy

theo như mình phỏng đoán thì nó có nghia là khi mình click vào "nhiều" đối tương miễn là không phải là đối tượng của thẻ input đang truy cập (mình nói khong ro nghĩa , đại khái ý mình đang đề cập đến cái 'this'--> co thể đổi nó sang một đối tương khác) , không bít có chính xác hông

với lại hỏi bac thêm cái này , giả sử mình muốn áp dụng cho mọi thẻ input thì sao (nghia là cái input text nào cũng áp dụng cái hiệu ứng đó )--> vay thì làm sao

thuyduongcd viết 12:53 ngày 10/10/2018

blur là sự kiện khi object bị mất focus (có thể hiểu là nó không được chọn nữa)
this là đại diện cho đối tượng mang nó.
Nếu muốn dùng cho thẻ nào thì thêm onfocus="..." onblur="..." vào thẻ đó.
Tuy nhiên nếu nhiều thẻ thì làm như vậy sẽ dài. Làm như vầy sẽ ngắn hơn chút ít:

Code:

<html>
<head>
<style>
.normal{
  background-color:#ffffff;
}
.focus{
  background-color:#fffde8;
}
</style>
</head>
<body>
Name: <input class="normal" onfocus="this.className='focus'" onblur="this.className='normal'" /><br />
Email:<input class="normal" onfocus="this.className='focus'" onblur="this.className='normal'" /><br />
Mobile<input class="normal" onfocus="this.className='focus'" onblur="this.className='normal'" /><br />

</body>
</html>

dokhacluan viết 12:53 ngày 10/10/2018

ok, thank bác thuyduong
hỉu sơ ý bác rùi

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

dokhacluan

0 chủ đề

0 bài viết

Tác giả nổi bật