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。
...全文
1461 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>
js中常用的事件，onclick 单击事件、onblur 失去焦点事件、onchange改变事件、onmouseover鼠标进入事件、onmouseout鼠标移除事件、onsubmit提交事件
onblur 失去焦点事件 onchange 当对象或选中区的内容改变时触发。 onmouseover 当用户将鼠标指针移动到对象内时触发。 onmouseout 当用户将鼠标指针移出对象边界时触发。 onsubmit 当表单将要被提交时触发。 ...
JavaScript 中的事件onload 加载完成事件-onclick 单击事件-onblur 失去焦点事件-onchange 内容发生改变事件-onsubmit 表单提交事件
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。 onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作 onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否...
table表格中下拉列表切换数据再次切换无法触发,select切换option后失焦
问题：新增切换版本功能，版本号数据通过@foccus异步调用接口获取，但是选中以后发现再次...步骤：1、给select加ref属性，由于是多个select，需要绑定唯一的ref， :ref="select-${scope.row.senCode}" <el-select .
js常用事件演示
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到...
JavaScript事件处理
文章目录一、事件与事件处理概述（一）JavaScript常用事件（二）事件的调用1、在HTML中调用2、在JavaScript中调用（三）事件对象二、表单相关事件（一）获得焦点与失去焦点事件（二）失去焦点内容改变事件（三）表单...
JavaScript

87,997

社区成员

224,709

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章