javascript中单击时,使select失去焦点?

ruanwxh 2010-01-27 03:28:37

mynewcell = mynewrow.insertCell();
mynewcell.innerHTML="<input type='text' name='WarehoseNameList' size='20' ondblclick='change_ware_input(this)' readonly value="+ wareName +" style='border: 0 solid #A6CAF0; background-color: #A6CAF0'>";

在javascript中change_ware_input这样写:
var warehouse="<SELECT name='SelectWarehoseNameList' onblur='change_ware_table(this)'>";
...
obj.parentElement.innerHTML=""+warehouse+"</SELECT>";

在change_ware_table方法:
obj.parentElement.innerHTML="<input type='text' name='WarehoseNameList' size='20' ondblclick='change_ware_input(this)' readonly value="+ obj.options[obj.selectedIndex].text +" style='border: 0 solid #A6CAF0; background-color: #A6CAF0'>";

想问下高手,当双击时text,text变成select ;当单击页面任何地方时,select又变回text?
原先select 里的onblur事件,必须选中select,选下select里的任何内容,单击时select才变回text。
而我现在想直接单击页面任何地方时,select又变回text。
...全文
1457 8 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
duwa789 2010-01-28
  • 打赏
  • 举报
回复
[Quote=""]
会出现上面的错误:双击变成select后,必须选下select里的任何内容,再单击其他地方,select才变成text。直接单击页面其他地方,select还是select。
[/Quote]

那你要的是啥样的。。没看明白……

就是点双击text变成select,然后选了select中的某项再变会text同时把选中的值赋给text?而如果不选中select的值就永远是select?
ruanwxh 2010-01-28
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 duwa789 的回复:]
双击文本框隐藏文本框并显示下拉框;
点击下拉框无变化;
点击页面其他部分显示文本框并隐藏下拉框。

不知道是不是你想要的。。。。

HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>Untitled Page</title><scriptlanguage="javascript">

document.onclick=function() {var event= window.event|| arguments.callee.caller.arguments[0];if (event.srcElement) {// if (event.srcElement.id == "text") display(false);
// elseif (event.srcElement.id=="select")return;else display(true);
}

}function display(visible) {
$=function(id) {return document.getElementById(id); }
$("text").style.display= visible?"inline" :"none";
$("select").style.display=!visible?"inline" :"none";
}</script></head><body><formid="form1" runat="server"><div><inputtype=textid="text" ondblclick="display(false);"/><selectid="select" style=" display: none;"><optionvalue="0">your testing</option></select></div></form></body></html>
[/Quote]
终于可以了,看来是我对javascript不够熟悉。照这个,稍微改下就行。谢谢楼上两位高手。如果还有其他好办法的。可以在接着留言。我先结贴了。3楼的办法让select foucus,这个想法如果可以实现的话,就更好。
duwa789 2010-01-28
  • 打赏
  • 举报
回复
onblur可以吧?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script language="javascript">
$ = function(id) { return document.getElementById(id); }
function display(visible) {
$("text").style.display = visible ? "inline" : "none";
$("select").style.display = !visible ? "inline" : "none";
}
function focusOut() {
$("text").value = $("select").value;
display(true);
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" id="text" ondblclick="display(false);" />
<select id="select" style="display: none;" onblur="focusOut();">
<option value="0">your testing 0</option>
<option value="1">your testing 1</option>
<option value="2">your testing 2</option>
</select>
</div>
</form>
</body>
</html>
ruanwxh 2010-01-28
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 duwa789 的回复:]
""
会出现上面的错误:双击变成select后,必须选下select里的任何内容,再单击其他地方,select才变成text。直接单击页面其他地方,select还是select。


那你要的是啥样的。。没看明白……

就是点双击text变成select,然后选了select中的某项再变会text同时把选中的值赋给text?而如果不选中select的值就永远是select?
[/Quote]
点双击text变成select,然后选了select中的某项后,失去焦点时再变会text同时把选中的值赋给text。
如果不选中select的值就永远是select,但单击页面其他地方也就是select失去焦点时要变会text
ruanwxh 2010-01-28
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 fandelei1982 的回复:]
在obj.parentElement.innerHTML=""+warehouse+" </SELECT>";后加上
document.getElementsByName("SelectWarehoseNameList")[0].focus();让select foucus。
[/Quote]
按这个做的话,双击 text闪下变成select,马上又变回text
friendly_ 2010-01-27
  • 打赏
  • 举报
回复
在obj.parentElement.innerHTML=""+warehouse+"</SELECT>";后加上
document.getElementsByName("SelectWarehoseNameList")[0].focus();让select foucus。
ruanwxh 2010-01-27
  • 打赏
  • 举报
回复
谢谢楼上。不过不是我想要的。
我要实现的是:
在页面里有个添加按钮,点添加时,在页面上生成表格(数据从数据库来的),所以我用到mynewrow.insertCell()。
现在就是想做个可以编辑表格里的内容。比如上面我想双击表格里的'text' name='WarehoseNameList' ,将它变成 select(select里的数据从数据库来的)。可是
会出现上面的错误:双击变成select后,必须选下select里的任何内容,再单击其他地方,select才变成text。直接单击页面其他地方,select还是select。
duwa789 2010-01-27
  • 打赏
  • 举报
回复

双击文本框隐藏文本框并显示下拉框;
点击下拉框无变化;
点击页面其他部分显示文本框并隐藏下拉框。

不知道是不是你想要的。。。。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>

<script language="javascript">

document.onclick = function() {
var event = window.event || arguments.callee.caller.arguments[0];
if (event.srcElement) {
// if (event.srcElement.id == "text") display(false);
// else
if (event.srcElement.id == "select") return;
else display(true);
}

}
function display(visible) {
$ = function(id) { return document.getElementById(id); }
$("text").style.display = visible ? "inline" : "none";
$("select").style.display = !visible ? "inline" : "none";
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<input type=text id="text" ondblclick="display(false);" />
<select id="select" style=" display: none;" >
<option value="0">your testing</option>
</select>
</div>
</form>
</body>
</html>

87,996

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧