当前位置：文江博客话题详情

输入时的默认文本

发布于 2024-07-26 01:32:10 字数 38 浏览 9 评论 0原文

如何在输入字段上设置空白默认文本并在元素处于活动状态时清除它。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坐在坟头思考人生 2024-08-02 01:32:10

在现代浏览器中，您可以在字段上设置 placeholder 属性来设置其默认文本。

<input type="text" placeholder="Type some text" id="myField" />

但是，在较旧的浏览器中，您可以使用 JavaScript 来捕获焦点和模糊事件：

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

演示：http://jsbin.com/utecu

In modern browsers, you may set the placeholder attribute on a field to set its default text.

<input type="text" placeholder="Type some text" id="myField" />

However, in older browsers, you may use JavaScript to capture the focus and blur events:

var addEvent = function(elem, type, fn) { // Simple utility for cross-browser event handling
    if (elem.addEventListener) elem.addEventListener(type, fn, false);
    else if (elem.attachEvent) elem.attachEvent('on' + type, fn);
},
textField = document.getElementById('myField'),
placeholder = 'Type some text'; // The placeholder text

addEvent(textField, 'focus', function() {
    if (this.value === placeholder) this.value = '';
});
addEvent(textField, 'blur', function() {
    if (this.value === '') this.value = placeholder;
});

Demo: http://jsbin.com/utecu

回复收藏 0 原文

空心↖ 2024-08-02 01:32:10

使用 onFocus 和 onBlur 事件可以让您实现这一点，即：

onfocus="if(this.value=='EGTEXT')this.value=''"

完整

onblur="if(this.value=='')this.value='EGTEXT'"

的示例如下：

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />

Using the onFocus and onBlur events allows you to achieve this, I.e.:

onfocus="if(this.value=='EGTEXT')this.value=''"

and

onblur="if(this.value=='')this.value='EGTEXT'"

The full example is as follows:

<input name="example" type="text" id="example" size="50" value="EGTEXT" onfocus="if(this.value=='EGTEXT')this.value=''" onblur="if(this.value=='')this.value='EGTEXT'" />

回复收藏 0 原文

随梦而飞# 2024-08-02 01:32:10

或者简单地说，

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

一旦清除该框，这将不会回发默认文本，但也将允许用户清除该框并在自动完成脚本的情况下查看所有结果。

Or simply

<input name="example" type="text" id="example" value="Something" onfocus="value=''" />

This will not post back the default text once the box is cleared but also will allow the user to clear the box and see all results in the case of an autocomplete script.

回复收藏 0 原文

要走干脆点 2024-08-02 01:32:10

声明非活动和活动状态的样式：

.active {
    color: black;
}

.inactive {
    color: #909090;
}

添加 Javascript 来处理状态更改：

function toggleText(el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="Default text") {
        el.value = "";
        el.className = "active";
    }
    else {
         //Remove whitespace
        if(v.indexOf(" ")!=-1) {
            split = v.split(" ").join("");
            v = split;
        }

          //Change to inactive state
        if(v=="") {
            el.value = "Default text";
            el.className = "inactive";
        }
    }
}

添加输入框，设置默认值、inactive 类集和指向 toggleText 的 Javascript 处理程序() 函数（您可以使用事件监听器来执行此操作如果你希望）

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">

Declare styles for inactive and active states:

.active {
    color: black;
}

.inactive {
    color: #909090;
}

Add the Javascript to handle the changing of state:

function toggleText(el)
{
    var v = el.value;

   //Remove text to allow editing
    if(v=="Default text") {
        el.value = "";
        el.className = "active";
    }
    else {
         //Remove whitespace
        if(v.indexOf(" ")!=-1) {
            split = v.split(" ").join("");
            v = split;
        }

          //Change to inactive state
        if(v=="") {
            el.value = "Default text";
            el.className = "inactive";
        }
    }
}

Add your input box, with the default value set, the inactive class set and Javascript handlers pointing to the toggleText() function (you could use event listeners to do this if you wish)

<input type="text" value="Default text" class="inactive" onFocus="toggleText(this);" onBlur="toggleText(this);">

回复收藏 0 原文

一场信仰旅途 2024-08-02 01:32:10

从可用性的角度来看，输入组件中的文本应仅保留用于用户输入目的。如果用户不改变，输入中可能的默认值应该是有效的。

如果占位符文本旨在提示如何填充输入，则最好将其放置在输入附近，以便在填充输入时也可以看到它。此外，在文本组件内使用占位符文本可能会导致问题，例如盲文设备。

如果使用占位符文本，无论可用性准则如何，都应该确保它以一种不引人注目的方式完成，以便它可以在没有 JavaScript 的情况下或在关闭 js 时与用户代理一起使用。

回复收藏 0 原文

习惯成性 2024-08-02 01:32:10

我找到了 jQuery 插件 (http:// /www.jason-palmer.com/2008/08/jquery-plugin-form-field-default-value/）并使用它:)

回复收藏 0 原文

暮年慕年 2024-08-02 01:32:10

我所做的是为现代浏览器添加一个占位符属性：

<input id='search' placeholder='Search' />

然后，我使用 JQuery 为旧浏览器做了后备：

var placeholder = $('search').attr('placeholder');
//Set the value
$('search').val(placeholder);

//On focus (when user clicks into the input)
$('search').focus(function() {
   if ($(this).val() == placeholder)
     $(this).val('');
});

//If they focus out of the box (tab or click out)
$('search').blur(function() {
   if ($(this).val() == '')
     $(this).val(placeholder);
});

这对我有用。

What I did is put a placeholder attribute for modern browsers:

<input id='search' placeholder='Search' />

Then, I made a fallback for older browsers using JQuery:

var placeholder = $('search').attr('placeholder');
//Set the value
$('search').val(placeholder);

//On focus (when user clicks into the input)
$('search').focus(function() {
   if ($(this).val() == placeholder)
     $(this).val('');
});

//If they focus out of the box (tab or click out)
$('search').blur(function() {
   if ($(this).val() == '')
     $(this).val(placeholder);
});

This works for me.

回复收藏 0 原文