想消失输入文本框默认值答案

【问题标题】：Want to disapper input textbox default value想消失输入文本框默认值
【发布时间】：2013-09-02 00:36:27
【问题描述】：

如果我问这个问题有误，请不要投反对票。我有一个这样的文本框：

<input class="login-inpt" runat="server" name="loginName" type="text" value="User Name" />

它当前拥有一个默认值。我希望在单击 TextBox 时清除默认值并用光标替换。

【问题讨论】：

查看此解决方案：stackoverflow.com/questions/4135818/…
这个问题和你的很相似：stackoverflow.com/questions/1626107/…
为什么在 ASP.NET MVC 3 视图中有runat="server" 属性？您似乎在 Classic ASP.NET WebForms 和 ASP.NET MVC 之间产生了一些混淆。您正在使用这两种技术中的哪一种？
您的问题与asp.net MVC 无关。这是一个 html/javascript 问题。我编辑了你的问题。
我正在研究 Asp.net MVC3。我通过使用 OnFocus 和 OnBlur 事件得到了解决方案。谢谢大家。

标签： javascript html textbox

【解决方案1】：

对于较新的浏览器 (IE>9)：

<input type="text" id="userName" placeholder="User Name" />

老年人：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Placeholder support</title>
</head>
<body>
    <input type="text" id="userName" placeholder="User Name" />

    <script src="../js/vendor/jquery-1.10.2.min.js"></script>
    <script src="../js/vendor/jquery-migrate-1.2.1.js"></script>
    <script src="../js/vendor/modernizr-latest.js"></script>
    <script src="../js/placeholder.js"></script>
</body>
</html>

placeholder.js（jQuery、Modernizr）

var Placeholder = (function ($, document) {

    /* Static Content */
    var _$document = $(document);

    /* Events */
    var _initPlaceholders = function () {
        _$document.find('input:text').each(function () {
            var $this = $(this);
            $this.css({ color: '#888' }).val($this.attr('placeholder'));
        });
    };

    var _placeholderEvent = function () {
        var $input = $(this), placeholderValue = $input.attr('placeholder');

        if ($input.val() === placeholderValue) {
            $input.css({ color: '#000' }).val('');
            return;
        }

        if ($input.val() === '') {
            $input.css({ color: '#888' }).val(placeholderValue);
        }
    };

    var _bindEvents = function () {
        if (!Modernizr.input.placeholder) {
            _initPlaceholders();
            _$document.on('focus blur', 'input:text', _placeholderEvent);
        }
    };

    var init = function () {
        _bindEvents();
    };

    return {
        init: init
    };
})(jQuery, document);

Placeholder.init();

【讨论】：

这确实是最好的方法，根据w3schools跨浏览器工作
这在旧版本的 Internet Explorer 中不起作用。如果您只针对最新版本的 Internet Explorer，那么这是一个不错的选择。

【解决方案2】：

你可以试试这个

<input type="text" value="user name" onfocus="if(this.value=='user name') this.value='';">

【讨论】：

【解决方案3】：

HTML：

<input type="text" value="user name" id="userName" />

使用 jQuery：

$(function() {
    $('#userName').click(function() {
        $(this).val('').unbind('click');
    });
});

编辑：这是demo

【讨论】：

【解决方案4】：

将以下作为属性添加到您的输入标签：

onfocus="if(this.value=='A new value') this.value='';"

发件人：How to clear a textbox using javascript

【讨论】：

【解决方案5】：

我得到了解决方案谢谢。 input type="text" id="userName" onfocus="inputFocus(this)" onblur="inputBlur(this)"

函数 inputFocus(i) { if (i.value == i.defaultValue) { i.value = ""; i.style.color = "#000"; } } 函数 inputBlur(i) { if (i.value == "") { i.value = i.defaultValue; i.style.color = "#888"; } }

【讨论】：

【解决方案6】：

你已经得到了很好的答案，但如果你是新手，你可能会对它在没有库的情况下如何工作感兴趣。

这里是 HTML：

<input id="textBox" class="textBox phrase" type="text" value="Enter Your Text..">

你不需要设置 class 和 id 你可以选择其中一个

这里是 JavaScript：

var textBox = document.getElementById('textBox'), //probably the fastest method
/**************************additionally possible****************************

var textBox = document.getElementsByTagName('input')[0], //returns HTMLInputElement list (since we've got only one we chose the first one)
or
var textBox = document.querySelectorAll('textBox'), //works almost the same way as jquery does except you don't get all jquerys functionality
or
var textBox = document.getElementsByClassName('textBox')[0], //i guess its a least supported method from the list

***************************************************************************/    
    //text you want to choose for you input
    phrase = "Enter Your Text..";

function addEvent(el, ev, fn) {
    //checking method support
    //almost every browser except for ie
    if(window.addEventListener) {
        el.addEventListener(ev, fn, false);
    } 
    //ie
    else if(window.attachEvent) {
        el.attachEvent('on' + ev, fn);
        el.dettachEvent('on' + ev, fn);
    } 
}

addEvent(textBox, 'focus', function (){
    //cross browser event object
    var e = e || window.event,
        target = e.target;
    //if the text in your text box is your phrase then clean it else leave it untouched
    target.value = target.value === phrase ? "" : target.value;
});

addEvent(textBox, 'blur', function (){
    //cross browser event object
    var e = e || window.event,
        target = e.target;
    //if your text box is not empty then leave it else put your phrase in
    target.value = target.value ? target.value : phrase;
});

【讨论】：

【解决方案7】：

$('.login-inpt').focus(function() {
   $(this).val('');
});
$('.login-inpt').focusout(function() {
   $(this).val('User Name');
});

在这里查看http://jsfiddle.net/TDUKN/

【讨论】：