精华内容
下载资源
问答
  • alert(obj.value.substr(0, pos) + " [这里是添加内容] " + obj.value.substr(pos, obj.value.length)); } " Text1 " onmouseup= " getValue(this) " type= " text " />   转载于:...
    <script type="text/javascript">
        function getPosition(obj) {
            var result = 0;
            if (obj.selectionStart) { //非IE浏览器
                result = obj.selectionStart
            }
            else
            { //IE
                var rng;
                if (obj.tagName == "TEXTAREA") { //如果是文本域
                    rng = event.srcElement.createTextRange();
                    rng.moveToPoint(event.x, event.y);
                }
                else
                { //输入框
                    rng = document.selection.createRange();
                }
                rng.moveStart("character", -event.srcElement.value.length);
                result = rng.text.length;
            }
            return result;
        }
    
        function getValue(obj) {
            var pos = getPosition(obj);
            alert(obj.value.substr(obj.value.substr(0, pos)+pos, obj.value.length));
            //alert(obj.value.substr(0, pos) + " [这里是添加的内容] " + obj.value.substr(pos, obj.value.length));
        }
    
    
    
    
    </script>
     <input id="Text1" οnmοuseup="getValue(this)" type="text" />

     

    转载于:https://www.cnblogs.com/914556495wxkj/p/3617434.html

    展开全文
  • 文本框的默认值为value="",我给设置了失去焦点事件,等我输入了"你好",失去焦点 alert文本框的值,输出的却是""; 怎么解决?
  • 我做了一个简易计算器,在输入数字进行计算时始终输出为NaN <html> <head> <title>j计算器</title> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 新手从仿做一个angular.js的简单demo(可以通过改变文本输入框value来改变divclass)中得到一些收获。

    最近开始学习angular.js,课程里有一个demo很好玩,我就想试着用原生js写一下。

    这个demo大致是这样的,有一个文本输入框,文本框下面是一个div,

    你可以在文本框里输入标签的单词,然后通过外联的foundation.css文件就可以把这个div改变成标签的样子。

    就变成了或者

    而且在输入的时候,下面的div还会实时的改变文字



    这个demo用angular.js实现起来很简单,但是我发现用原生js实现起来却不是那么容易的事情。

    一开始我以为无非就是可以用getElementById获取到input和div,然后在获取到input的value,把这个value值赋值给div的class作文class的名称,再改变div的innerHTML值就大功告成。


    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/foundation.min.css"/>
        <title></title>
    </head>
    <body style="padding:10px;">
    <input id="input1" type="text" />
    <div id="div1">我是一个</div>
    </body>
    <script type="text/javascript">
    window.οnlοad=function(){
    	var oDiv=document.getElementById('div1');
    	var oInput=document.getElementById('input1');
    	var leibie="";
    	
    	leibie=oInput.value;
    	oDiv.setAttribute("class",leibie);  
    	oDiv.innerHTML="我是一个"+leibie;		
    }
    </script>
    </html>


    但是我发现网页在我输入文本框之后并没有什么变化,没报任何错,div的内容也没变,也只是有class,但是没有class的名称。

     接着我用console.log(leibie)和console.log(oInput,value)调试发现leibie和oInput,value都是空字符串,接着在百度里查找也没什么头绪,直到在技术交流群里的一位大神点醒了我,

    因为我在页面加载的时候就已经获取到了input这个文本框的对象,那时的leibie和oInput,value都是空,所以输入的值对于oInput,value根本没有改变。

    所以我就把js改成了

    window.οnlοad=function(){
    		var oDiv=document.getElementById('div1');
            var leibie="";
    		setTimeout(function(){
    		    leibie=document.getElementById('input1').value;
    		},4000);
    		setTimeout(function(){
    			oDiv.setAttribute("class",leibie); 
    		},5000);		
    		setTimeout(function(){
    			oDiv.innerHTML="我是一个"+leibie;
    		},5000);
    		
    }

    感觉很笨拙,但是初步能实现demo 的效果,只是,必须在4秒内把想要的标签输入到input里,这个设计看起来很反人类。。。。

    于是我就想到,可不可以加一个button来作为这个时间节点呢,然后给button加一个点击事件,

    在点击事件里再获取oInput的value,再去改变div的class和innerHTML。

    代码也就变成了这样。

    window.οnlοad=function(){
    		var oDiv=document.getElementById('div1');
            var leibie="";
            var btn=document.getElementsByTagName('button')[0];
            btn.οnclick=function(){
            	leibie=document.getElementById('input1').value;
            	oDiv.setAttribute("class",leibie);
            	oDiv.innerHTML="我是一个"+leibie;
            }
    }

    页面也就变成了


    和这样


    相比于刚才的效果 这个会好一点 但是和最初的demo的效果差距还是有的。

    直到偶然间看到技术群里讨论给input绑定change事件,只要文本框的内容改变,就可以触发事件,我就又把代码小小的改进了下。

    window.οnlοad=function(){
    		var oDiv=document.getElementById('div1');
            var leibie="";
    		$("#input1").change(function(){
    			leibie=document.getElementById('input1').value;
    			oDiv.setAttribute("class",leibie);
    			oDiv.innerHTML="我是一个"+leibie;
    		});
    }

    这样的话,只要我在文本框里输入了值,就可以触发改变div的class和innerHTML的事件。

    也可以做到demo的样子了,不过还有个很大的问题就是,change事件必需要失去焦点时候才能触发,也就是说div的innerHTML不会实时的改变,如果焦点还在input里,就会出现下面的状况。箭头指向的就是焦点还在input里。


    写这个小demo还是花了挺长的时间,因为对获取对象时机的不了解,百度到的也收获甚少,但是写到最后还是对于对象value有了一个新的认识。


    如何改进,我想了很久还是没有想出来,如果哪位大神可以帮助我继续改进这个demo,可以在下面给我留言,在下感激不尽。


    从刚开始自学前端到现在也差不多有大半年的时间了,看似很简单的一个demo,但是自己实现起来还是漏洞百出,不得不说Javascript确实是门值得深入学习的语言,在前端的路上任重而道远,希望自己的技术可以越来越成熟。




    展开全文
  • script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $("#txt_name").keyup(function()...
  • 方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给p标签赋值那个文本框的值。效果:输入途中,p标签不会变化,还是原来的内容,当输入的...

    文本框输入,p标签的内容自动变成文本框的内容,如下是三种方法的测试:

    方法1:JS里的onchange,当文本框内容改变事件,该事件里写的方法是,获取p标签本身,然后获取文本框的值,赋值给变量,最后给p标签赋值那个文本框的值。
    效果:输入途中,p标签不会变化,还是原来的内容,当输入的焦点离开文本框时,p标签变成了文本框中的值。

    方法2:JS里的oninput,当文本框内容改变事件(不同于上面的,会即时生效),该事件的方法同上。
    效果:输入途中,p标签也会跟着变化,即时是输入途中也会改变。

    方法3:引入vue.js,给input文本框加v-mode,在div3里p标签位置设置需要显示内容的地方
    效果:输入途中,p标签也会跟着变化,即时是输入途中也会改变。

    测试代码:

      <style>
     #div1{background-color:#d9b6b6;}
     #div2{background-color:#b4e7aa;}
     #div3{background-color:#c5f2ee;}
      </style>
     </head>
     <body>
      <script src="vue.js"></script>
    </head>
    <body>
    <div id="div1"><!--非vue-->
    JS的onchage事件:
    <input type="text" id="t1" onchange="p1()">
    <p id="pp">原始值</p>
    </div>
    <script>
    function p1(){
        var lb_p=document.getElementById("pp");
        var txt_t1=document.getElementById("t1").value;
        lb_p.innerHTML=txt_t1;}
    </script>
    
    <div id="div2"><!--非vue-一些ie低版本不支持-->
    JS的oninput事件:
    <input type="text" id="t2" oninput="p2()">
    <p id="pp2">原始值</p>
    </div>
    <script>
    function p2() {
            var lb_p=document.getElementById("pp2");
            var txt_t2=document.getElementById("t2").value;
            lb_p.innerHTML=txt_t2;
    }
    </script>
    
    <div id="div3">
    vue的v-mode:
      <input v-model="message">
      <p>{{ message }}</p>
    </div>
    <script>
    new Vue({
      el: '#div3',
      data: {
        message: '原始值'
      }
    })
    </script>
     </body>

    图示:

    转载于:https://www.cnblogs.com/huaxie/p/11430006.html

    展开全文
  • 实现思路:在文本框上绑定onkeyup事件,实时检测文本框中字符串的长度,如果长度大于指定,则清除超出长度的信息例:限制Input文本框最大长度为8猫毛教程使用JS实现限制文本框输入的文字数量的方法分享win...

    摘要:

    下文讲述javascript中,使用js脚本限制文本框中字符的数量的方法分享,如下所示:

    在web系统的开发中,我们需要对文本框的长度进行限制,下文讲述Js脚本限制文本框字符数量的方法。

    实现思路:

    在文本框上绑定onkeyup事件,实时检测文本框中字符串的长度,如果长度大于指定值,则清除超出长度的信息

    例:

    限制Input文本框最大长度为8

    猫毛教程使用JS实现限制文本框输入的文字数量的方法分享

    window.οnlοad=function(){

    var txt=document.getElementById("txtTest");

    txt.οnkeyup=function()

    {

    chkMax(txt,8); //设置字数不能超过8

    }

    }

    function chkMax(txt,maxLength){

    var s=txt.value;

    var strlen=s.length;

    if(strlen>maxLength){

    alert('字数超过限制');

    eval(txt.value=s.substr(0,maxLength));

    }

    }

    在文本框内输入文本,超过8个字符,将出现提示信息

    javascript 限制文本框的输入字符长度的应用

    展开全文
  • input-获取文本框值

    千次阅读 2018-08-28 11:17:34
    创建页面 初始代码 赋值方式——引用JQ库,给文本框赋值为“张馨予” ...取值方式——输入文本框的值 取值方式——文本框的VALUE值 审查元素可看到该文本框的Valu...
  • 这是完整的js ``` $("#btnImport").on("click", function(){ var formData = new FormData(); formData.append("file",$('#exampleInputFile')[0].files[0]);//封装文件 //获取单据编号 .attr("value") ...
  • 小程序不支持dom所以document.getElementById不可使用。 非form表单提交 login.wxml 用户名: 密 码: ...login.js // pages/index/login.js ...//获取用户输入的用户名 userNameInput:function(e) { ...
  • 语法:元素.属性名 (1)在文本框中输入值,点击按钮后,后出现在文本框中输入的值,并且清空在...--在文本框中输入的值就相当于输入到了value值中,所以当要获取文本框中的内容时,就可以直接找到value <input ty...
  • 在优化功能时,需要使用js脚本控制文本框只能输入-1或大于0的整数,并且使用jQuery获取复选框的值,并将获取的值以key-value的形式以List &lt;Map&lt;String,String&gt;&gt;的形式提交的后台。这里...
  • <!... <... <head> ...meta charset="UTF-8">...获取文本框输入的值</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <form> <input id="t
  • 这是我工作中用到的。使用的是EXT,不过,通用。稍微改一点就好了。  var KeyWord=Ext.... //这是EXT获取文本框的值  KeyWord=KeyWord.replace(/[\ \‘\’\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=
  • //通过这个方法可以取到动态table中输入的值,怎么能够通过button的提交,把该值传到后台处理? b = "name"+String(lengths); var address = document.getElementById(b).value; alert(address); //怎么把...
  • JS文本框中最小值

    2013-12-03 06:23:19
    分享一例js代码,用于获取文本框中内容最小值,代码很简单,有需要朋友可以作个参考。  本文转自:http://www.jbxue.com/article/14179.html 本节内容: JS取文本框中最小值   效果:取最小值 ...
  • LayUi之限制文本框输入

    千次阅读 2019-12-17 15:26:37
    获取文本框的值,然后通过正则表达式来判断是否符合要求。 然而LayUi则可以在html中直接写正则表达式 写法如下 <div> <label class="layui-form-label">排序</label> <div class="layui-...
  • js获取下拉列表的值

    千次阅读 2012-07-28 10:19:06
    要求:这是一个查询,下拉列表前有个文本框,下拉列表是查询的类型,文本框输入的是类型的值,比如说,选中下拉列表的按IP,则文本框输入的就是你要查询那个ip的信息(127.0.0.1),当选择按时间查询的时候,...
  • 当DIV中有input文本框,通过js调用div的innerHTML无法获取文本框中用户输入的值。 暂时解决方案是对setAttribute的value属性赋值。 //将form1下包含的所有input文本框通过js重新赋值一遍 //这样下面调用$get(...
  • 这个获取不到 这个获取到 只是var o里id$('#dw,#dw1,#dw2').val(this.options[this.selectedIndex].text); html 页面在[http://ask.csdn.net/questions/234615]( "") ``` //计算提取日期 function calc...
  • -------文本框调用 onkeypress="return inputNum(event);" ... //火狐使用evt.which获取键盘按键值,IE使用window.event.keyCode获取键盘按键  var ev = evt.which?evt.which:window.event
  • jsp页中搜索文本框,默认显现“关键字”点击后“关键字”消失,输入内容点搜索按钮文本框...给文本框一个默认值“关键字”,使用js响应文本框的获取焦点事件,将其设置为空即可 点击搜索后提交到给Servlet或者acti
  • 为单行文本框添加一个list属性,该list属性的值是某个dadalist元素的id。datalist类似于选择框,但是用户输入的数据不再list中,用户可自行输入。datalist本身不显示,当获取焦点时才显示。 dds...
  • js输入的字体放大显示案例 <!-- 案例分析: 1、快递单号输入内容时,上面的大号字体盒子( con )显示 这里面的文字 2、同时把快递单号里面的值(value)获取过来赋值给con盒子 (innerText)作为内容 ...

空空如也

空空如也

1 2 3 4 5 6
收藏数 107
精华内容 42
关键字:

js获取文本框输入的值