ด้วยการใช้ jQuery คุณสามารถลบค่าเริ่มต้นได้อย่างง่ายดายเมื่อถึงเวลาที่ต้องส่ง ด้านล่างเป็นตัวอย่าง:
$('#submit').click(function(){
var text = this.attr('placeholder');
var inputvalue = this.val(); // you need to collect this anyways
if (text === inputvalue) inputvalue = "";
// $.ajax(... // do your ajax thing here
});
ฉันรู้ว่าคุณกำลังมองหาภาพซ้อนทับ แต่คุณอาจต้องการความสะดวกของเส้นทางนี้ (ตอนนี้รู้ว่าสิ่งที่ฉันเขียนข้างต้น) ถ้าเป็นเช่นนั้นฉันเขียนบทความนี้สำหรับโครงการของฉันเองและใช้งานได้ดีจริงๆ (ต้องมี jQuery) และใช้เวลาเพียงไม่กี่นาทีในการดำเนินการสำหรับไซต์ทั้งหมดของคุณ มันมีข้อความสีเทาในตอนแรกสีเทาอ่อนเมื่ออยู่ในโฟกัสและสีดำเมื่อพิมพ์ นอกจากนี้ยังเสนอข้อความตัวยึดตำแหน่งเมื่อใดก็ตามที่ช่องป้อนข้อมูลว่างเปล่า
ก่อนตั้งค่าแบบฟอร์มของคุณและรวมแอตทริบิวต์ตัวยึดตำแหน่งของคุณในแท็กอินพุต
<input placeholder="enter your email here">
เพียงแค่คัดลอกรหัสนี้และบันทึกเป็นตัวยึด
(function( $ ){
$.fn.placeHolder = function() {
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css({ color:'grey' });
input.focus(function(){
if (input.val() === text) input.css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.blur(function(){
if (input.val() == "" || input.val() === text) input.val(text).css({ color:'grey' });
});
input.keyup(function(){
if (input.val() == "") input.val(text).css({ color:'lightGrey' }).selectRange(0,0).one('keydown', function(){
input.val("").css({ color:'black' });
});
});
input.mouseup(function(){
if (input.val() === text) input.selectRange(0,0);
});
};
$.fn.selectRange = function(start, end) {
return this.each(function() {
if (this.setSelectionRange) { this.setSelectionRange(start, end);
} else if (this.createTextRange) {
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
});
};
})( jQuery );
เพื่อใช้กับอินพุตเพียงหนึ่งเดียว
$('#myinput').placeHolder(); // just one
นี่คือวิธีที่ฉันแนะนำให้คุณใช้กับฟิลด์อินพุตทั้งหมดบนไซต์ของคุณเมื่อเบราว์เซอร์ไม่สนับสนุนแอตทริบิวต์ตัวยึด HTML5:
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder) {
$.getScript("../js/placeholder.js", function() {
$(":input").each(function(){ // this will work for all input fields
$(this).placeHolder();
});
});
}