Question

是否有可能使用js或其他任何技术覆盖<input type="text" title="blah" id="name"/> HTML元素的标题？我的目标是根据if条件更改该标题：

我尝试过不同的方式。其中一些将是：

$(document).ready(function(){
    var name = $('#name').val();
    if (name.length < 3) {
        $('#name').prop('title', 'New title');
    }
});

或者

var name = document.getElementById('name');
if (name.length < 3) {
    document.getElementById('name').title = 'New Title';
}

直到现在都没有奏效。谢谢！

LE

这是我使用的完整示例，但它仍然没有按预期工作（最初：当表单未提交时，标题应为＆＃34; blah＆＃34;，之后用户按下提交按钮，如果文本框长度小于3，则应显示＆＃34;新标题＆＃34;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <form id="form" method="post">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" class="form-control" placeholder="Name" title="blah"/>
            </div>          
            <div class="form-group">
                <button type="button" class="btn btn-default">Go</button>
            </div>
        </form>
    </div>

    <script type="text/javascript">
    $(document).ready(function() {
        $('#form').submit(function(e) {
            if (changeNameTitle())
                e.preventDefault(); // prevent submitting the form for invalid data
            }
        });

        changeNameTitle();
    });

    function changeNameTitle()
    {
        if ($('#name').val().length < 3) {
            $('#name').attr('title', 'New title');
            return true;
        }
        return false;
    }
    </script>
</body>
</html>

我做错了什么？我已经在Firefox 40.0和IE 11中测试了它。

LE2 我终于找到了我想要的回复。基于Mihai的回应（我要感谢）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <form id="form" method="post">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" id="name" class="form-control" placeholder="Name" title="blah"/>
            </div>          
            <div class="form-group">
                <button type="button" class="btn btn-default" onclick="return changeNameTitle();">Go</button>
            </div>
        </form>
    </div>

    <script type="text/javascript">
    function changeNameTitle(){
        if ($('#name').val().length < 3) {
            $('#name').attr('title', 'New title');
            return true;
        } else if ($('#name').val().length >= 3) {
            $('#name').attr('title', 'Ok');
            return true;
        }
        return false;
    }
    </script>
</body>
</html>

Answer 1

使用.attr()代替.prop()：

$('#name').attr('title', 'New title');

Answer 2

你最初的问题是错的。如果您想在按下按钮后更改标题，您必须这样做：

$(document).ready(function() {
    $('#form button').click(function() {
        changeNameTitle();
    });

    changeNameTitle();
});

function changeNameTitle()
{
    if ($('#name').val().length < 3) {
        $('#name').attr('title', 'New title');
    }
}

甚至更好：

$(document).ready(function() {
    $('#form').submit(function(e) {
        if (changeNameTitle()) {
            e.preventDefault(); // prevent submitting the form for invalid data
        }
    });

    changeNameTitle();
});

function changeNameTitle()
{
    if ($('#name').val().length < 3) {
        $('#name').attr('title', 'New title');
        return true;
    }
    return false;
}

我可以使用javascript覆盖input type = text元素的标题吗？

2 个答案: