Question

我在网站上查了几个其他问题，但我仍然感到茫然。我想使用javascript（没有JQuery）来采用下面的表格：

<!doctype html>
<html>
    <head>
        <meta charset = "UTF-8"/>
        <title>Account Sign-Up</title>
    </head>
    <body>
        <h1>Profile Sign-Up</h1>
        <fieldset>
            <p>
                <p><label for = "first_name">First Name: </label>
                 <input type = "text" id = "first_name" onfocus = "javascript:showText(1)"/>
                 <div id = "div1" style = "display:none">Enter your first name</div>

                <p><label for = "last_name">Last Name: </label>
                 <input type = "text" id = "last_name" onfocus = "showText(2)"/>
                 <div id = "div2" style = "display:none">Enter your last name</div>

                <p><label for = "email">E-Mail: </label>
                 <input type = "text" id = "email" onfocus = "showText(3)"/>
                 <div id = "div3" style = "display:none">Enter E-Mail</div>

                <p><label for = "username">Username: </label>
                 <input type = "text" id = "username" onfocus = "showText(4)"/>
                 <div id = "div4" style = "display:none">Enter your desired screen name</div>

                <p><label for = "password">Password: </label>
                 <input type = "password" id = "password" onfocus = "showText(5)"/>
                 <div id = "div5" style = "display:none">Enter the password you will use to log into your account in the future</div>

                <p><label for = "retype_password">Retype your password again: </label>
                 <input type = "password" id = "retype_password" onfocus = "showText(6)"/>
                 <div id = "div6" style = "display:none">Type your password again</div>

                <p><button name = "submit" type = "button" id = "submit">Submit</button>
            </p>
        </fieldset>
        <script src = "Q10.js"></script>
    </body>
</html>

并应用以下脚本，以便在文本框获得焦点时显示一些隐藏文本。我不希望超出所描述的范围。所以不，我不能在页脚中的单个div元素中使用弹出工具提示或文本等。我也不关心数据注入或代码的漏洞/安全性，因为我没有使用它做任何事情实际的。

var enableBtn = function () {
    document.getElementById("submit").disabled = false;
};
//function enables submit button

var disableBtn = function () {
    document.getElementById("submit").disabled = true;
};
//disables submit button

var checkInput = function () {
    if (document.getElementById("password").value.length > 0 && document.getElementById("username").value.length > 0 && document.getElementById("password").value === document.getElementById("retype_password").value) {
        enableBtn();
    }
    else {
        disableBtn();
    }
};

var showText = function (numb) {
    document.getElementById("div" + numb).style = "display:inline";
};
var hideText = function(numb) {
    document.getElementById("div" + numb).style = "display:none";
};

document.onfocus = checkInput
//if password and username have an input- and retype password is the same as password, button is usable. If not, it's disabled. 

document.getElementById("retype_password").oninput = checkInput;
document.getElementById("password").oninput = checkInput


//document.getElementById("password").onclick = function() {alert(document.getElementById("password").value.length)};
//

我目前正在遇到打嗝，因为我无法让事件在焦点上运行脚本，并且不知道还有什么地方可以转向。请帮助＆gt;＆lt;

Answer 1

我不确定这是否是您想要的方式，请查看代码段。如果没有，我会关闭这个答案。我所做的是在showText()中添加/更改一些代码。而且我认为最好显示你用来隐藏文本的那些div（或<p>）标签。我添加了用于隐藏名为description的文本类的css。您可以删除您制作的其他无用的代码。

＆＃13;

var enableBtn = function () {
    document.getElementById("submit").disabled = false;
};
//function enables submit button

var disableBtn = function () {
    document.getElementById("submit").disabled = true;
};
//disables submit button

var checkInput = function () {
	
    if (document.getElementById("password").value.length > 0 && document.getElementById("username").value.length > 0 && document.getElementById("password").value === document.getElementById("retype_password").value) {
        enableBtn();
    }
    else {
        disableBtn();
    }
};

var showText =  function(numb) {
	var desc = document.getElementsByClassName("description");
	for (var i = 0; i < desc.length; i++) {
		desc[i].style.display ="none";
    }
    document.getElementById("div" + numb).style.display = "inline";
};
var hideText = function(numb) {
    document.getElementById("div" + numb).style = "display:none";
};

document.onfocus = checkInput
//if password and username have an input- and retype password is the same as password, button is usable. If not, it's disabled. 

document.getElementById("retype_password").oninput = checkInput;
document.getElementById("password").oninput = checkInput


//document.getElementById("password").onclick = function() {alert(document.getElementById("password").value.length)};

＆＃13;

.description:before {
	content: '*';
}
.description {
	display: none;
	color: red;
}

＆＃13;

<h1>Profile Sign-Up</h1>
        <fieldset>
            <p>
                <p><label for = "first_name">First Name: </label>
                 <input type = "text" id = "first_name" onfocus = "javascript:showText(1)"/>
                 <span id="div1" class="description">Enter your first name</span>

                <p><label for = "last_name">Last Name: </label>
                 <input type = "text" id = "last_name" onfocus = "showText(2)"/>
                 <span id="div2" class="description">Enter your last name</span>

                <p><label for = "email">E-Mail: </label>
                 <input type = "text" id = "email" onfocus = "showText(3)"/>
                 <span id="div3" class="description">Enter E-Mail</span>

                <p><label for = "username">Username: </label>
                 <input type = "text" id = "username" onfocus = "showText(4)"/>
                 <span id="div4" class="description">Enter your desired screen name</span>

                <p><label for = "password">Password: </label>
                 <input type = "password" id = "password" onfocus = "showText(5)"/>
                 <span id="div5" class="description">Enter the password you will use to log into your account in the future</span>

                <p><label for = "retype_password">Retype your password again: </label>
                 <input type = "password" id = "retype_password" onfocus = "showText(6)"/>
                 <span id="div6" class="description">Type your password again</span>

                <p><button name = "submit" type = "button" id = "submit">Submit</button>
            </p>
        </fieldset>
        <!-- <script src = "Q10.js"></script> -->

＆＃13;

Answer 2

它应该可以正常工作，但可能存在问题：

1.如果你在JSFiddle上运行它，那么你可以试试。 (function () { "use strict"; var app = angular.module("autoQuote", ["ui.router", "ngResource"]); app.config(["$stateProvider", "$urlRouterProvider", function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise("/"); $stateProvider .state("Cars", { url: "", templateUrl: "/rc1/renderStep/cars" }) .state("Drivers", { url: "/drivers", templateUrl: "/rc1/renderStep/drivers", controller: "renderStepCtrl", }) }]) app.run(["$log", "$rootScope", "$state", "dtoResource", "questionResource", "postDtoFactory", function ($log, $rootScope, $state, dtoResource, questionResource, postDtoFactory) { $log.info('Post DTO on page load.'); $rootScope.$state = $state; dtoResource.rc1LoadDTO() .then(function (data) { $rootScope.AutoQuote = data; postDtoFactory.postDto() .then(function (data) { questionResource.getQuestions($rootScope.AutoQuote.postAutoQuoteObj.SessionInfo.StateCode) .then(function (questions) { console.log('questions', questions); $rootScope.questions = questions; //$rootScope.answers = {PC:12345,VehicleYear_1:2017}; // test code console.log('Obtained questions. Assigned to rootscope'); }) }) }) .then(function () { console.log('This should be printed after the above methods are done executing'); console.log($rootScope); }) }]) }());。工作小提琴：https://jsfiddle.net/24sck8rs/5/

window.showText

2. hoisting的可能原因。我在顶部声明了函数变量并删除了window.showText = function (numb) { document.getElementById("div" + numb).style = "display:inline"; };。工作小提琴：https://jsfiddle.net/24sck8rs/6/

3.在var致电

之前，在head内声明您的脚本

更改显示属性onfocus / onblur

2 个答案: