用原生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ì)用就好。

演示

圖片演示

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

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

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

如下：

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

html：

css: