单击时删除输入文本的默认值

Posted 2023-03-15

【中文标题】单击时删除输入文本的默认值

【英文标题】：Delete default value of an input text on click

【发布时间】：2011-02-28 09:13:14

【问题描述】：

我有一个输入文本：

<input name="Email" type="text" id="Email" value="[e-mail]" />

我想设置一个默认值，例如“您的编程问题是什么？具体一点。”在 *** 中，当用户点击它时，默认值消失。

【参考方案1】：

这是非常简单的javascript。它对我来说很好：

// JavaScript:

function sFocus (field) 
    if(field.value == 'Enter your search') 
        field.value = '';
    
    field.className = "darkinput";


function sBlur (field) 
    if (field.value == '') 
        field.value = 'Enter your search';
        field.className = "lightinput";
    
    else 
        field.className = "darkinput";
    

// html
<form>
  <label class="screen-reader-text" for="s">Search for</label>
  <input
    type="text"
    class="lightinput"
    onfocus="sFocus(this)" 
    onblur="sBlur(this)"
    value="Enter your search" name="s" id="s"
  />
</form>

【讨论】：

你也应该展示如何连接它。这些函数自己什么都不做。

【参考方案2】：

这是一个简单的方法。

#animal 代表 DOM 中的任何按钮。#animal-value 是目标的输入 ID。

$("#animal").on('click', function()
    var userVal = $("#animal-value").val(); // storing that value
    console.log(userVal); // logging the stored value to the console
    $("#animal-value").val('') // reseting it to empty
);

【参考方案3】：

我没有看到像这样的任何非常简单的答案，所以也许它会对某人有所帮助。

var inputText = document.getElementById("inputText");
inputText.onfocus = function() if (inputText.value != "") inputText.value = "";; 
inputText.onblur = function() if (inputText.value != "default value") inputText.value = "default value";; 

【参考方案4】：

为了将来参考，我必须包含 HTML5 方法来执行此操作。

<input name="Email" type="text" id="Email" value="[e-mail]" placeholder="What's your programming question ? be specific." />

如果您有 HTML5 文档类型和兼容 HTML5 的浏览器，这将起作用。但是，许多浏览器目前不支持此功能，因此至少 Internet Explorer 用户将无法看到您的占位符。但是，请参阅http://www.kamikazemusic.com/quick-tips/jquery-html5-placeholder-fix/ (archive.org version) 以获得解决方案。使用它，您将非常现代且符合标准，同时还为大多数用户提供功能。

此外，所提供的链接是一个经过充分测试和完善的解决方案，应该可以开箱即用。

【讨论】：

很好的答案，现在非常相关。也可以像 <textarea placeholder="Write something..."></textarea> 一样工作。

value="" 似乎覆盖了占位符，并且在它们都存在的情况下不起作用。

@Brian：该链接对我有用，但我添加了一个指向 archive.org 的页面版本的链接，大约在我写这个答案的时候。请记住，那是在 2010 年 - 现在是 all modern browsers support the placeholder attribute，所以你不应该需要 - 也可能不应该使用 - 兼容性增强脚本。

【参考方案5】：

这是一个 jQuery 解决方案。当用户清除输入字段时，我总是让默认值重新出现。

<input name="Email" value="What's your programming question ? be specific." type="text" id="Email" value="[e-mail]" />

<script>
$("#Email").blur(
    function ()
        if ($(this).val() == "")
            $(this).val($(this).prop("defaultValue"));
        
).focus(
    function ()
        if ($(this).val() == $(this).prop("defaultValue"))
            $(this).val("");
    
);
</script>

【参考方案6】：

只需在您的输入中使用placeholder 标签而不是value

【讨论】：

我不知道该属性存在，但效果很好，谢谢！

【参考方案7】：

为什么要删除价值？它很有用，但为什么不试试 CSS

input[submit] 
   font-size: 0 !important;

值对于检查和验证您的 php 很重要

【参考方案8】：

<input name="Email" type="text" id="Email" placeholder="enter your question" />

placeholder 属性指定了一个简短的提示，用于描述输入字段的预期值（例如，示例值或预期格式的简短描述）。

在用户输入值之前，短提示会显示在输入字段中。

注意：占位符属性适用于以下输入类型：文本、搜索、url、电话、电子邮件和密码。

我认为这会有所帮助。

【讨论】：

您正在展示占位符的使用，但对该主题的快速描述确实对其他人有所帮助。

我已经编辑了我的答案，我希望这些关于占位符的描述对人们有所帮助。

【参考方案9】：

我们可以不使用js，使用html5的“placeholder”属性通过以下方式做到这一点 （当用户开始输入时，默认文本会消失，但不是在单击时）

<input type="email" id="email" placeholder="[e-mail]">

看到这个：http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_placeholder

【参考方案10】：

输入以下内容 在 标记内，只需添加 onFocus="value=''" 以便您的最终代码如下所示：

<input type="email" id="Email" onFocus="value=''"> 

这利用了 javascript onFocus() 事件持有者。

【参考方案11】：

我认为这有点清洁。注意输入的“defaultValue”属性的用法：

<script>
function onBlur(el) 
    if (el.value == '') 
        el.value = el.defaultValue;
    

function onFocus(el) 
    if (el.value == el.defaultValue) 
        el.value = '';
    

</script>
<form>
<input type="text" value="[some default value]" onblur="onBlur(this)" onfocus="onFocus(this)" />
</form>

【参考方案12】：

编辑：尽管此解决方案有效，但我建议您尝试MvanGeest's solution below，它使用placeholder-attribute 和一个javascript 后备，用于尚不支持它的浏览器。

如果您正在寻找与 MvanGeest 回复中的 JQuery 回退等效的 Mootools，here is one。

--

您可能应该使用onfocus 和onblur 事件来支持在表单中切换的键盘用户。

这是一个例子：

<input type="text" value="[e-mail]" name="Email" id="Email"
 onblur="if (this.value == '') this.value = '[e-mail]';"
 onfocus="if (this.value == '[e-mail]') this.value = '';" />

【讨论】：

第二。 -1 对于 DOM 污染，有更多的语义解决方案（更不用说更简洁、更短等）

我以为提问者只是想要一个简单的解决方案，所以我只是给了他最简单的解决方案。但是，我认为理想的解决方案（正如您所指出的）是使用 placeholder-attribute 和 Javascript 后备，用于尚不支持它的浏览器。

@roosteronacid - 您将 clean source 与 clean DOM 混淆了，这是两个 非常 不同的概念。这是附加处理程序的另一种方法，DOM 将看到这与不显眼的方法之间几乎没有区别。标记不是 DOM，它是初始化 DOM 的结构。

@Nick：你是对的。污染源头是我的意思。

恕我直言，使用 HTML 属性没有任何问题。最重要的是它不会“污染 DOM”。这是设置事件侦听器的最佳和最可靠的方法，该侦听器无需等待 on-DOM-ready/onload 即可立即工作。唯一可以做的改进是将内联代码提取到函数中。

【参考方案13】：

使用jQuery，你可以做到：

$("input:text").each(function ()

    // store default value
    var v = this.value;

    $(this).blur(function ()
    
        // if input is empty, reset value to default 
        if (this.value.length == 0) this.value = v;
    ).focus(function ()
    
        // when input is focused, clear its contents
        this.value = "";
    ); 
);

您可以将所有这些内容放入自定义插件中，如下所示：

jQuery.fn.hideObtrusiveText = function ()

    return this.each(function ()
    
        var v = this.value;

        $(this).blur(function ()
        
            if (this.value.length == 0) this.value = v;
        ).focus(function ()
        
            this.value = "";
        ); 
    );
;

以下是插件的使用方法：

$("input:text").hideObtrusiveText();

使用此代码的优点是：

它不显眼，不会污染 DOM 代码重用：它适用于多个领域 它自己计算输入的默认值

非 jQuery 方法：

function hideObtrusiveText(id)

    var e = document.getElementById(id);

    var v = e.value;

    e.onfocus = function ()
    
        e.value = "";
    ;

    e.onblur = function ()
    
        if (e.value.length == 0) e.value = v;
    ;

【讨论】：

3 cmets 这里：1) if (this.value == v) this.value = v; 应该是 if (this.value === "") this.value = v;，2) 您正在清除焦点上的值，即使它是有效的非默认值，以及 3) 不要t 假设他们正在使用 jQuery。

是的。我发现了错误并纠正了它。谢谢你尼克:)

如果我输入任何输入并重新聚焦元素，您的解决方案仍然会清除元素，这不是理想的行为。

@NickCraver，在这种情况下我们真的需要使用=== 吗？我认为我们总是可以假设文本输入的值是一个字符串，除了"" 之外什么都不会评估？