求js将html 的输入框中的内容改用 span 显示。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>  
  <script   language="javascript">   
  function change(){
var oValue = document.getElementById('newpass').value;
document.getElementById('ospan').innerText = oValue;
  }  </script>
 </HEAD> <body>
 <form><input type="text" name="aa" id="newpass" value="" >
<span id="ospan"></span>
<input type="button" value="change" onclick="change()">
 </form> </BODY>
</HTML>

解决方案 »

  1.   

    我的页面是用输入框显示的，但内容过长的时候输入框显示不开（页面要打印的）。所以内容过长的想改用span显示。
      

  2.   

    那用<textarea>还有我上面回复不就是 用<span>
      

  3.   

    你是不是想鼠标放在输入框上时，显示完整的？
    还是想直接<sapn>发生发生发生十分</span>把问题说清楚了，最好能做一个图来说明效果
      

  4.   

    有以下几点要求：
    1，检测显示的内容是否超过文本框所能显示的长度。
    2，如果是，自动生成span。占据文本框的位置。可能比较难。
      

  5.   

    原来是这个啊，这个简单，这个你只需要if then语句就可以了
    比如你设定文本框只能显示50个字
    那么你只需要
    <%if len(rs("title"))>50 then%>
    <sapn><%=rs("title")%></span>
    <%else%>
    <input type="text" name="aa" value="<%=rs("title")%>" >
    <%end if%>
      

  6.   

    这个已经不需要使用js的了！
    直接服务端代码的if then可以解决
      

  7.   

    也就是页面加载完js检测文本框是否能显示完全。如显示不开。则转成span显示。隐藏文本框。
    不知我说明白了没有。
      

  8.   

    晕，使用JS的话，一样的，你只需要遍历当前文本框，判断当前文本框的是否超过了你规定的字数，是的话就隐藏文本框，隐藏文本框也就是把文本框type改成hidden就可以隐藏，并在当前插入一span
      

  9.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>  
      <script   language="javascript">   
    function oChange(obj1) 
    {  if(obj1.value.length>5){

    var obj = document.createElement('span');
    obj.innerText = obj1.value;
    document.body.appendChild(obj);
    obj1.parentNode.replaceChild(obj,obj1);
    }
    return false;} 
    </script>  </script>
     </HEAD> <body>
     <form>
    <table id="test" border='1'> 
    <tbody>
    </tbody></table> 
    <input type="text" onpropertychange="oChange(this)" value="">小于5 </form> </BODY>
    </HTML>
      

  10.   

    遍历所有的textarea 然后将他们disabled = true;顺便改下样式 让它看起来象span就行了 反正提交时是不会传递出去的
      

  11.   

    IE适用
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>  
      <script   language="javascript">   
      function alter(){
        var olist = document.getElementsByTagName('input');
        for(var i=0;i<olist.length;i++){
           o = olist[i]
       alert(o+":"+o.type)
           if(o.type=="text"||o.type==""){
              o.outerHTML = "<span>"+o.value+"</span>"
           }
        }
      }  </script>
     </HEAD> <body onload="alter()">
     <form><input type="text" name="aa" id="newpass" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" >
    <span id="ospan"></span>
    <input type="button" value="change" onclick="change()">
    <input type="text" name="aa" id="newpass" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasdfas" >
     </form> </BODY>
    </HTML>
      

  12.   

    由于不知道你的页面结构，所以要把代码嵌入到你的网页内还要调整<html><head><title></title>
    <style>
    input{display:block;width:20ex}
    </style>
    <script language="javascript" type="text/javascript">
    window.onload=function(){var s="dff";
    var inp=document.getElementsByTagName('input');
    for(var i=0;i<inp.length;i++){
    if(inp[i].value.length>parseInt(inp[i].currentStyle.width))
    {   var s=document.createElement('span');
        s.innerText=inp[i].value;
        s.style.display="block";
        var parent =inp[i].parentNode;
        parent.insertBefore(s,inp[i]);
        inp[i].style.display="none";
    }
    }
    }
    </script>
    </head><body>
    <input type="text" value="ffffffftttttttttttttttttttttttf">
    <input type="text" value="ffffffff">
    <input type="text" value="ffffffttttttffggggggg">
    <input type="text" value="fffffttttttttttttttttttttttttttfff">
    <input type="text" value="fffffttttttttttttttttfff">
    <input type="text" value="fffffttttfff">
    <input type="text" value="ffffffftttttttttttttfffff">
    <input type="text" value="ffffffff">
    <input type="text" value="fffffttttttttttttttttttfff">
    </body></html>
      

  13.   

    我也没看明白意思。不过按我的理解，楼主要的东西貌似简单，而实际上是一个大工程。
    用JavaScript实现WEB的UI控件，是一个小UI框架了。我也想了一段时间了，呵呵。
      

  14.   


    是的，用input显示数据，如果数据过长有可能显示不开。
    结合上面几位的思路和代码。做了一段js脚本,估算input内容的长度，如果超过input的width,则转成span显示。
    现在共享出来请指教。function SetCtrl(len)
    {
    var j = document.all.tags("INPUT").length;
    var  array = new Array();
    l=0;
    for (i=0;i< j; i++ )
    {

    if(document.all.tags("INPUT")[i].type == "text")
    {
    n= document.all.tags("INPUT")[i].id;
    array[l] = n;
    l++;
    //alert(i + ':' +n);
    }
    }
    for(k=0;k<array.length;k++)
    {
    //alert(document.getElementById(array[k]).value);

    span = document.createElement("SPAN");
    span.innerHTML= document.getElementById(array[k]).value;
    obj = document.getElementById(array[k]);
     wordWidth   =  len; 
    // alert(obj.value+":"+obj.value.replace(/[^\x00-\xff]/g,"**").length*wordWidth/2+":"+obj.clientWidth);
    if(obj.value.replace(/[^\x00-\xff]/g,"**").length*wordWidth/2>obj.clientWidth)
    {
    document.getElementById(array[k]).parentNode.replaceChild(span,document.getElementById(array[k]));
    }
    }

    }