2016-07-25 51 views
0

我在網站上查了一些其他問題,但我仍然處於虧損狀態。我想使用JavaScript(不JQuery的)採取以下形式:更改顯示屬性onfocus/onblur

<!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)}; 
// 

目前,我正在運行到一個打嗝,因爲我不能讓事件上運行腳本的重點,不知道還有什麼地方可以轉。請幫助> <

+0

似乎'showText()'函數大幹快上'onfocus'正確調用。看不到'hideText()'函數被調用?這有什麼問題? – Rohit

+0

我在第一個html onfocus調用中做了不同的處理。我想第一個是正確的?但也 - 我從來沒有得到任何顯示正確 - 所以我從來沒有打擾嘗試隱藏工作 – user3734311

+0

你是否在小提琴或任何其他在線編輯器上運行此代碼? – Rohit

回答

0

我不確定這是否是您想要的方式,請查看代碼段。如果沒有,我會關閉這個答案。我所做的是在showText()中添加/更改一些代碼。我認爲最好將那些用於隱藏文本的div展示爲(或<p>)標籤。我添加了css來隱藏名爲description的文本類。你可以刪除其他你沒有用的代碼。

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() { 
 
\t 
 
    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) { 
 
\t var desc = document.getElementsByClassName("description"); 
 
\t for (var i = 0; i < desc.length; i++) { 
 
\t \t 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)};
.description:before { 
 
\t content: '*'; 
 
} 
 
.description { 
 
\t display: none; 
 
\t color: red; 
 
}
<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> -->

0

它應該工作正常,但有可能是可能出現的問題:1.如果您正在運行此上的jsfiddle那麼你可以嘗試

window.showText。工作小提琴:中hoistinghttps://jsfiddle.net/24sck8rs/5/

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

2.Possible原因。我已經聲明函數變量在頂部並且被刪除var。工作小提琴:https://jsfiddle.net/24sck8rs/6/

3.Declare您在head腳本之前function呼叫

+0

等等 - 我會抓住白癡球。我使用相同的腳本來完成其他功能,並忘記將Q10更改爲Q14:l。它確實有效,但我仍然試圖找出如何實現hideText - 可能只是通過在那裏使用onblur ....無論如何,謝謝你 – user3734311