Question

我在javascript中使用了一个函数，如下所示，我的Html标签看起来像

输入id =“TestId”type =“text”

JavaScript的：

$('#TestId').blur(function(){
    if ($(this).val().length == 0) {
        $(this).val('Please enter').addClass('Watermark');
    }
}).focus(function () {
    if ($(this).val() == 'Please enter') {
        $(this).val('').removeClass('Watermark');
    }
}).val('Please enter').addClass('Watermark');

如果Html元素的类型是文本，我按预期工作，如果元素的类型是文件，它不起作用。请帮帮我

Answer 1

设置水印您应该使用占位符属性：

<input type=text placeholder="WaterMark">

您无法为文件设置水印

Answer 2

您可以使用隐藏文件输入和占位符元素来重新创建所需的效果。我在jsfiddle http://jsfiddle.net/WAtuj/

上做了一个简单的例子

看看如何触发文件更改事件：

$("span").click(function () {
    $("input:file").trigger("click");
});
$("input:file").change(function () {
    var fileName = $(this).val();
    $("span").text(fileName);
});

可在此处找到更详细，更复杂的解决方案：http://www.onextrapixel.com/2012/12/10/how-to-create-a-custom-file-input-with-jquery-css3-and-php/

另一个合适的解决方案就是用span元素包装你的输入字段，并尝试使用:after和:before伪类创建一个简单的简单占位符标签

如何为类型文件的输入元素设置水印文本等默认文本

2 个答案: