整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          實(shí)現(xiàn)實(shí)時(shí)輸出顯示用戶在文本框輸入的內(nèi)容的小辦法教程

          實(shí)現(xiàn)實(shí)時(shí)輸出顯示用戶在文本框輸入的內(nèi)容的小辦法教程

          用原生js將用戶在文本框里面輸入的內(nèi)容失實(shí)的輸出預(yù)覽出來(lái)。

          前言

          我們?cè)谧霰韱蔚臅r(shí)候,通常會(huì)使用jQuery的表單驗(yàn)證功能。但是如果只是很簡(jiǎn)單的表單驗(yàn)證輸出預(yù)覽的話,我們可以使用原生js來(lái)解決這個(gè)問(wèn)題。這次云落就遇到這個(gè)問(wèn)題,所以在這里記錄一下。

          情況介紹

          這幾天云落在做一個(gè)積分充值的東西,其中遇到了一個(gè)需求,就是將用戶在文本框里面輸入的內(nèi)容實(shí)時(shí)的顯示出來(lái)。當(dāng)然我們還可以對(duì)這個(gè)內(nèi)容進(jìn)行進(jìn)一步的計(jì)算。比如我們可以將用戶輸入的內(nèi)容實(shí)時(shí)的以十倍的計(jì)算結(jié)果輸出來(lái)。原來(lái)我百度了一下,發(fā)現(xiàn)有很好的解決辦法。使用原生js來(lái)解決這個(gè)問(wèn)題。當(dāng)然了這里的是輸出并不需要服務(wù)器的支持,也就是說(shuō)數(shù)據(jù)并不經(jīng)過(guò)服務(wù)器,如果經(jīng)過(guò)服務(wù)器的話,這個(gè)辦法就沒有用了。

          代碼

          <input type="number" placeholder="請(qǐng)輸入充值的RMB金額" name="pay_number" id="pay_number" onkeyup="javascript:senddata(this);"/> 元 <span id="outdiv"></span>
          //下方為js代碼,上方為HTML構(gòu)造
          <script type="text/javascript">function senddata(inputobj) {	
          var obj;	
          obj=document.getElementById("outdiv");	
          obj.innerHTML='您將充值<strong><em><span style="color:#E53333;font-size:16px;">' + inputobj.value * 10 + '</span></em></strong>金幣';
          }</script>

          代碼很簡(jiǎn)單,一看就懂,,不懂的話,會(huì)用就好。

          演示

          圖片演示

          后語(yǔ)

          這幾天在做一個(gè)積分的玩意,就是付費(fèi)可見,在線充值的玩意,不是什么高大上的功能,地址可以去看下:http://googlo.me/chongzhi.html

          題圖來(lái)自u(píng)nsplash

          SS動(dòng)畫提示框,可以用在用戶輸入信息時(shí)候的提醒功能上

          如下:

          實(shí)現(xiàn)代碼

          html:

          css:

          日常開發(fā)中,為了方便數(shù)據(jù)的輸入和輸出,JavaScript提供了一些常用的輸入輸出語(yǔ)句,具體如表1-3所示。
          表1常用的輸入輸出語(yǔ)句

          類型

          語(yǔ)句

          說(shuō)明

          輸入

          prompt()

          用于在瀏覽器中彈出輸入框,用戶可以輸入內(nèi)容

          輸出

          alert()

          用于在瀏覽器中彈出警告框

          document.write()

          用于在網(wǎng)頁(yè)中輸出內(nèi)容

          console.log()

          用于在控制臺(tái)中輸出信息

          接下來(lái)將分別演示document.write0、console.log0和promptO的使用。

          1. document.write()

          document.write0的輸出內(nèi)容中如果含有HTML標(biāo)簽,會(huì)被瀏覽器解析。下面利用documenL.write0在頁(yè)面中輸出“我是document.write0語(yǔ)句!”,示例代碼如下。

          document.write('我是document.write()語(yǔ)句!');

          2. console.log()

          利用console.log0語(yǔ)句在控制臺(tái)輸出“我是console.log0語(yǔ)句!”,示例代碼如下。

          console.log('我是console.log()語(yǔ)句!');

          console:.log0的輸出結(jié)果需要在瀏覽器的控制臺(tái)中查看。在Chrome 瀏覽器中按“F12”鍵(或在網(wǎng)頁(yè)空白區(qū)域右擊,在彈出的菜單中選擇“檢查”)啟動(dòng)開發(fā)者工具,然后切換到“Console”(控制臺(tái))面板,即可看到console.log0的輸出結(jié)果。

          3.prompt()

          利用prompt0語(yǔ)句實(shí)現(xiàn)在頁(yè)面中彈出一個(gè)帶有提示信息的輸入框,示例代碼如下。

          prompt(請(qǐng)輸入姓名:');

          上述示例代碼運(yùn)行后,將在頁(yè)面中彈出一個(gè)輸人框并提示用戶“請(qǐng)輸人姓名:”提示框。


          主站蜘蛛池模板: 人妻视频一区二区三区免费| 亚洲乱码一区二区三区国产精品| 天码av无码一区二区三区四区 | 激情内射亚州一区二区三区爱妻| aⅴ一区二区三区无卡无码| 中文无码AV一区二区三区| 亚洲成在人天堂一区二区| 中字幕一区二区三区乱码 | 色一情一乱一伦一区二区三区日本| 男人的天堂精品国产一区| www一区二区www免费| 无码国产伦一区二区三区视频| 中文乱码人妻系列一区二区| 国产精品亚洲一区二区三区久久 | 国产精品污WWW一区二区三区 | 国产吧一区在线视频| 在线观看日韩一区| 国产丝袜视频一区二区三区| 99久久精品日本一区二区免费| 一区二区三区在线观看中文字幕| 无码一区二区三区老色鬼| 精品国产一区二区三区在线| 亚洲综合国产一区二区三区| 另类国产精品一区二区| 国模精品一区二区三区| 亚洲变态另类一区二区三区| 大屁股熟女一区二区三区| 无码中文字幕人妻在线一区二区三区 | 成人精品一区久久久久| 色一乱一伦一图一区二区精品 | 一区二区三区视频网站| 国产精品夜色一区二区三区| 中文字幕一区二区三区四区| 无码人妻精品一区二区三区久久久 | 日本精品少妇一区二区三区| 国产一区二区三区影院| 国产伦精品一区二区三区| 精品综合一区二区三区| 69久久精品无码一区二区| 内射女校花一区二区三区| 国产一区二区视频免费|