Javascript 如何将标签放置在其文本字段中?
我有许多文本字段,显示文本框中的指令文本(默认值的外观)。聚焦时,文本颜色变浅,但直到输入文本后才会消失。删除文本后,标签将返回。它很光滑默认值不会剪切它,因为它们会在聚焦时消失。 我让它工作,但代码很复杂,因为它依赖于与文本字段的各个宽度相对应的负边距。我想要一个动态解决方案,其中文本字段的标签可以自动正确定位,可能需要使用脚本 任何帮助都将不胜感激。但我不是在寻找默认值作为解决方案 谢谢 迈克 编辑得更精确些 再次编辑以提供一些简单代码,说明我所追求的效果:Javascript 如何将标签放置在其文本字段中?,javascript,html,css,Javascript,Html,Css,我有许多文本字段,显示文本框中的指令文本(默认值的外观)。聚焦时,文本颜色变浅,但直到输入文本后才会消失。删除文本后,标签将返回。它很光滑默认值不会剪切它,因为它们会在聚焦时消失。 我让它工作,但代码很复杂,因为它依赖于与文本字段的各个宽度相对应的负边距。我想要一个动态解决方案,其中文本字段的标签可以自动正确定位,可能需要使用脚本 任何帮助都将不胜感激。但我不是在寻找默认值作为解决方案 谢谢 迈克 编辑得更精确些 再次编辑以提供一些简单代码,说明我所追求的效果: <input style=
<input style="position: relative; width: 150px; font-size: 10px; font-family: Verdana, sans-serif; " type="text" name="name" id="name"
onfocus="javascript: document.getElementById('nameLabel').style.color='#BEBEBE';"
onkeypress="javascript: if (event.keyCode!=9) {document.getElementById('nameLabel').innerHTML=' ';}"
onkeyup="javascript: if (this.value=='') document.getElementById('nameLabel').innerHTML='Your Name';"
onblur="javascript: if (this.value=='') {document.getElementById('nameLabel').style.color='#7e7e7e'; document.getElementById('nameLabel').innerHTML='Your Name';}"/>
<label id="nameLabel" for="name" style="position: relative; margin-left: -150px; font-size: 10px; font-family: Verdana, sans-serif;">Your Name</label>
你的名字
你是说喜欢吗?但不是“必需”而是有标签
我使用jQuery解决方案,将输入值设置为“required”。输入具有灰色类,因此默认文本较浅
评论后编辑
您可以更改keydown和keyup上的输入值,而不是使用焦点
$('.required_input').keydown(function()
{
if (this.value == 'required')
{
$(this).val('').removeClass('gray');
}
} );
$('.required_input').keyup(function()
{
if (this.value == '')
{
$(this).val('required').addClass('gray');
}
} );
$('.required_input').blur(function()
{
if (this.value == '')
{
$(this).val('required').addClass('gray');
}
} );
您在这里要问的可能是所谓的文本框水印
为此,通常不在文本字段中使用标签(控件)。相反,当文本字段的实际内容为空时,使用某些CSS属性将文本字段的内容替换为某些文本,然后在模糊后将其删除(附加检查文本框内的文本本身是否与水印文本相同。如果是,请再次清空该字段。)
试试看。使用jquery和css实现这一点非常简单。我从某处借用了一个:
$(function() {
// Give the textbox a watermark
swapValues = [];
$('.your_input_class').each(function(i){
$(this).val("Please enter xyz");
swapValues[i] = $(this).val();
$(this).focus(function(){
if ($(this).val() == swapValues[i]) {
$(this).val("").css("color", "#333");
}
}).blur(function(){
if ($.trim($(this).val()) == "") {
$(this).val(swapValues[i]).css("color", "#ccc");
}
});
});
});
然后对于您的输入框:
<input class="your_input_class" type="text" value="" />
当页面加载时,它会记住存储在其中的值(好吧,我直接在JS中设置了我的值),当它聚焦/未聚焦时,它也会改变颜色。我会采取不同的方法(这不完全是我的主意,但我找不到学分的来源):
第一-使用html5“占位符”属性
第二个-用于检测浏览器中占位符的支持,并使用一个简单的jQuery脚本向不支持占位符的浏览器添加支持
因此,html将如下所示:
<input type="text" class="placeholder" placeholder="Help Text" />
<textarea class="placeholder" placeholder="Another help text"></textarea>
还有javascript:
/* Set placeholder for browsers that don't support HTML5 <input placeholder='text'>
* Depends on Modernizr v1.5
*/
if (!Modernizr.input.placeholder){
$('input[placeholder], textarea[placeholder]')
.focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
})
.blur(function() {
var input = $(this);
if (input.val() == '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
})
//Run once on load
.blur();
// Clear all 'placeholders' on submit
$('input[placeholder], textarea[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
});
}
/*为不支持HTML5的浏览器设置占位符
*取决于Modernizer v1.5
*/
if(!modernizer.input.placeholder){
$('input[placeholder],textarea[placeholder]')
.focus(函数(){
var输入=$(此);
if(input.val()==input.attr('placeholder')){
input.val(“”);
input.removeClass('placeholder');
}
})
.blur(函数(){
var输入=$(此);
如果(input.val()=''){
input.addClass(“占位符”);
val(input.attr(‘占位符’);
}
})
//负载运行一次
.blur();
//在提交时清除所有“占位符”
$('input[placeholder],textarea[placeholder])。父('form')。提交(函数(){
$(this.find(“[占位符]”).each(函数(){
var输入=$(此);
if(input.val()==input.attr('placeholder')){
input.val(“”);
}
});
});
}
window.onload=函数(){
输入=document.getElementsByTagName(“输入”);
对于(i=0;i
这段脚本应该做您想做的事情它是否将文本字段的实际值设置为required?它可能一直都是可以接受的。我不认为我可以使用默认值来获得我想要的结果。我更新了帖子以使其更清晰。你不需要删除焦点的默认值。您可以等待,直到发生按键关闭事件。我改变了我的代码来反映这一点。我不是吹毛求疵,但我更喜欢将其称为提示横幅文本,而不是水印。根据定义,水印是持久的。另一方面,当您聚焦文本框时,提示横幅文本将消失,而当您键入文本框时,提示横幅文本将消失。这并不是一个很好的参考,而是Win32 API也将此功能称为提示横幅文本。我同意您可能不想在文本框中放置标签。然而,我也鄙视javascript解决方案。如果textbox元素本身有一个属性来指示提示横幅文本,那就太好了。也许他们会把它添加到标准中:)。Namingwise我从ASP.NET AJAX控件工具包中获得了它,该工具包使用了该特定术语。我同样认为,你可以使用一个纯CSS实现:悬停和背景图像,这不是完美的,但可行。
/* Set placeholder for browsers that don't support HTML5 <input placeholder='text'>
* Depends on Modernizr v1.5
*/
if (!Modernizr.input.placeholder){
$('input[placeholder], textarea[placeholder]')
.focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
})
.blur(function() {
var input = $(this);
if (input.val() == '') {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
})
//Run once on load
.blur();
// Clear all 'placeholders' on submit
$('input[placeholder], textarea[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
});
});
}
<script type="text/javascript">
window.onload = function(){
inputs = document.getElementsByTagName("input");
for(i = 0; i < inputs.length;i++){
var feild = inputs[i];
if(feild.type == "text"){
var label = document.getElementById(feild.id + "Label");
label.style.left = "-" + feild.clientWidth;
}
}
}
</script>