Question

我有一个表单输入：

<input type="text" name="footer_contact_name" class="footer_contact_input" onfocus="this.value='';" onblur="return inp_cl(this);" value="Name" />

我做了一个js函数：

function inp_cl(input){
    if(input.value==''){
        return 'Name';
    }
}

问题是表单输入值不会改变为“Name”onBlur！

这里有什么想法吗？

或许你们对如何使代码尽可能短，或者甚至是一种完全不同的方法都有更好的建议？我想要的只是文本“名称”作为默认值，然后消失onFocus，如果没有输入，再次重新出现。

由于

Answer 1

您需要将return 'Name';更改为input.value = 'Name';

Answer 2

有一些解决方案：

解决方案1 

你的onblur中的回归并不是你想要的功能，就像你写的那样。在不更改功能的情况下，您可以使用以下命令更改onblur以使用函数的返回值：

onblur="this.value=inp_cl(this);"

或您可以修复函数直接更新输入内容：

function inp_cl(input) {
    if (input.value == '') {
        input.value = 'Name';
    }
}

并将您的onblur属性更改为：

onblur="inp_cl(this);"

你的onfocus的问题在于它会消灭输入框的内容而不管其中的内容是什么，所以如果你已经填充它并且你离开并回到这个领域，那么它将被擦除out，所以你需要反转你的功能并指出你的焦点：

onfocus="inp_bl(input)"

<script type="text/javascript">

function inp_bl (input) {
    if (input.value == 'Name') {
        input.value = '';
    }
}

</script>

解决方案2

或者你可以在javascript中将它连接起来，从而不再需要你的标记中的onfocus / onblur属性 - 这个脚本会将水印直接挂钩到所需的输入事件上：

<script type="text/javascript">

watermark = function(input, watermarkText) {
    input.onfocus = function () {
        if (this.value == watermarkText)
            this.value == '';
    }
    input.onblur = function () {
        if (this.value == '')
            this.value == watermarkText;
    }
}

new watermark(document.getElementById("txtName"), "Name");
new watermark(document.getElementById("txtAddress"), "Street Address");
new watermark(document.getElementById("txtPostalCode"), "Postal Code");

</script>

<input type="text" id="txtName" />
<input type="text" id="txtAddress" />
<input type="text" id="txtPostalCode" />

现在您可以在标记中废弃onfocus / onblur属性...并且您有可重复的代码，这意味着您不必使用onfocus / onblur功能污染您的标记。

解决方案3

到目前为止，我能想到的最简单的方法是使用jQuery和watermark插件 - 如果你已经在使用jQuery，那么这没什么大不了的，但如果你是不，它增加了一些你可能不想要的开销。 jQuery非常轻量级，但它带有一点学习曲线，因为它使用的基于集合的范例并不是命令式程序员习惯的：

$(document).ready(function() {

    //This is the important bit...
    $("#id_of_your_input_control").watermark("String to use as watermark");

});

然后废弃你的onfocus / onblur属性，因为水印功能会将它全部挂钩。

对于这种功能，jQuery使事情更具表现力 - 如果你不熟悉它，那么查找和熟悉它肯定是值得的。

<强>附录

关于解决方案3 的好处是它会在显示水印时处理文本样式之类的内容，使其看起来像水印一样，这意味着你不要我必须自己处理所有这些。它还适当地附加到onblur / onfocus。如果你选择解决方案2 ，这是一个天真的解决方案 - 如果你想为onblur和/或onfocus使用多个处理程序，那么该方法无法正确附加，并且这些事件的所有其他处理程序将被替换为这些 - 所以它不是技术上一种安全的方法，但在99.9％的情况下，它会正常工作。

Answer 3

试着帮助你吧!!

<input type="Text" value="Name" onblur="if(this.value=='') this.value=this.defaultValue; " 
                onfocus="if(this.value==this.defaultValue) this.value=''; ">

javascript函数返回表单输入元素不起作用

3 个答案: