lansechenji吧 关注:394贴子:1,267
  • 11回复贴,共1

animate cc2021(21.0.7)(html5)在HTML5输入文本使用说明

只看楼主收藏回复

声明,每个AN版本都是不同的,问题也不同,所以从现在起,我发的帖子都会表明版本号.
AN的问题实际多数每个人遇到的报错相同,但是错误的原因都不相同.所以以后提问人也最好带软件版本号以供解决问题时候还原问题原因.
至于输入文本,在2020几个版本中是存在问题的,无法显示或无法找寻到实例.所以这里采用21.0,7版作为演示.
因为输入文本,在属性面板中消失,很多人都疑问.
实际输入文本已改为组件形式.不属于软件内部打包的状况.
使用方法.
1.在菜单--窗口--组件面板中.选择TextInput,双击或拖入舞台中.

2,在属性中给组件起个实例名,如txt

3,使用getElementById获取实力名.以及数值.如:
var name =document.getElementById("txt").value;
//定义一个叫name的变量,变量等于,文档内ID为txt的对象数值.
这个时候就可以获取到输入框内的输入了.
也可以反过来给以输入框数值,如:
接上边的name,name="测试文本"就可以让输入框显示文本.
或直接写document.getElementById("txt").value="测试文本"
以上,需要进行事件或帧播放时候才能实时更改.
我添加一个点击事件.(在点击舞台时,更改字号字体,并显示输入的数值)
stage.on("stagemousedown", function() {
let srk=document.getElementById("txt")
srk.style.fontSize = "28px";//更改字号
srk.style.fontFamily="'Comic Sans MS', 草书, sans-serif";//更改字体
var name = srk.value;//获取输入的内容
alert(name)
});
其中,字号字体等样式或其他的.因为组件内置了Jq所以可以用JQ写法(老一点的浏览器可能会显示错误,所以能原生不插件)
stage.on("stagemousedown", function() {
let srk=document.getElementById("txt")
$("#txt").css({"color": "teal","font-size": 18,"text-align": "center"});
var name = srk.value;//获取输入的内容
alert(name)
});
以上,就是大概的使用方法简介.详细的其他事件,需要看html的开发资料,请自己搜寻查看.


IP属地:北京1楼2021-06-21 20:46回复
    如果我想用这个制作一个填空题,应该怎么去检测到填写的内容然后点击提交按钮判断正误呢,谢谢吧主,主要是作业太着急需要


    2楼2023-01-12 21:13
    收起回复
      要做答题,一般做法,是做1个正确答案的数据,1个问题题库.
      然后抽取答案随机分配到每个题目随机位置.
      然后再把空白的选项用问题库随机填充.
      这样页面就完成了.
      而在分配随机位置的时候同时会自动分配ID,这个ID加入到一个数组中.
      然后提交时候只要获取选择的ID再和正确答案对比就可以判断对错.
      以上是传统的做法.写的比较繁琐但是在使用上相对方便,但是不会一步步教怎么做.
      因为里边牵扯到传输,跨域,结构等,不是能很快讲解好的.
      跨域就好比你做的H5中有图片,代码,音乐,你电脑播放OK,
      但是你拷贝到安卓手机里,就发现不是丢图就是没音乐等,
      这个不处理好,你做的东西就无法用.
      所以只是简单举例下你问的填空.
      舞台先设置1X1大小,然后F9打开代码编译器复制以下代码.
      这个就是个简单的对比方式,用作答题就有点开玩笑了,因为源码直接可以看到.
      所以只是演示下.
      这个代码的好处是没有外部文件,所以可以直接使用,拷贝安卓里也可以用.对新手友好.
      其中判断答案是逻辑代码,其他都为页面排版.
      属性,方法,不明白的可以去看W3C看,写的要比我说的详细.
      let newDiv = document.createElement("div");
      let newDiv1 = document.createElement("div");
      //定义文本
      var span = document.createElement("span");
      span.innerText ='请输入答案'
      //定义文本框
      var input1 = document.createElement('input');
      input1.id="in1";
      input1.type="text";//"text"文本框
      document.body.appendChild(newDiv);//DIY插入BODY
      newDiv.appendChild(newDiv1);//DIY插入div1
      newDiv1.appendChild(span)//文本添加DIV
      newDiv1.appendChild(input1);//文本框天骄到DIV
      function ss(){
      //判断答案
      if(document.getElementById("in1").value=="1"){alert('正确')}else{alert('错误')}
      }
      let jw = document.createElement("div");
      document.body.appendChild(jw);
      var inputbtn = document.createElement('input');
      inputbtn.type="button";
      inputbtn.value="提交答案";
      inputbtn.onclick=function(){ss()};
      jw.appendChild(inputbtn);//添加按钮


      IP属地:北京3楼2023-01-16 16:35
      回复
        以前用js,在flash上做一些小交互,现在客户都要求H5,改成手机上用了,有没有好的书籍或者教程,特别是H5文件如何在服务器上部署,如何在手机上调用。 AN canvas学习方面的。谢谢!


        IP属地:海南4楼2023-02-07 11:18
        收起回复



          an 2023版 获取不到 输入文本哦,求解 十万火急


          IP属地:广西5楼2023-06-17 21:33
          回复