1. 程式人生 > >幾種實現點選修改按鈕可編輯文字,不點則不可編輯的方式

幾種實現點選修改按鈕可編輯文字,不點則不可編輯的方式

第一種:

<html>

<head>
<script 
type="text/JavaScript" language="JavaScript">
function 
doclick(){
var 
docs document.getElementByIdx_x('url');
docs.readOnly 
false;
//alert("asdfasd");
}
</script>
</head>
<body>
<input 
type="text" id="url" name="T_montant" value="com" 
readOnly />
<input 
type="button" value="edit" onclick="doclick();">
</body>

</html>

第二種:

<a id="aText" href="#">編輯文字</a>
<input id="text" type="text" disabled="true" />
var link = document.getElementById("aText");
link.onclick = function(){
  link.style.disabled = true;
}

第三種:

<div id="text">文字文字</div>
var id = document.getElementById('text');
var value = id.innerHTML ;
id.onclick = function(){
   
  this.innerHTML = "<input type='text' value='"+text+"' />" ;
}

第四種(經典):

readonly和readOnly有什麼區別:

readonly 屬性規定輸入欄位為只讀。

只讀欄位是不能修改的。不過,使用者仍然可以使用 tab 鍵切換到該欄位,還可以選中或拷貝其文字。

readonly 屬性可以防止使用者對值進行修改,直到滿足某些條件為止(比如選中了一個複選框)。然後,需要使用 JavaScript 消除 readonly 值,將輸入欄位切換到可編輯狀態。

readonly 屬性可與 <input type="text"> 或 <input type="password"> 配合使用。

readOnly 屬性設定或返回文字域是否為只讀。

<html>
<body>
<script type="text/javascript">
function kk(){
var gg = document.getElementById("name");
gg.readOnly=false;
}
</script>

<form action="/example/html/form_action.asp" method="get">
 
  <p>Name:<input type="text" name="email" /></p>

  <p>Country:<input id="name" type="text" name="country"
  value="China" readOnly/></p>
  <input type="button" value="修改"  onclick="return kk()"/>
  <input type="submit" value="Submit"/>
</form>

<p>請在提交按鈕上單擊,輸入會發送到伺服器上名為 "form_action.asp" 的頁面。</p>

</body>
</html>