整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用原生js將用戶在文本框里面輸入的內容失實的輸出預覽出來。
前言
我們在做表單的時候，通常會使用jQuery的表單驗證功能。但是如果只是很簡單的表單驗證輸出預覽的話，我們可以使用原生js來解決這個問題。這次云落就遇到這個問題，所以在這里記錄一下。
情況介紹
這幾天云落在做一個積分充值的東西，其中遇到了一個需求，就是將用戶在文本框里面輸入的內容實時的顯示出來。當然我們還可以對這個內容進行進一步的計算。比如我們可以將用戶輸入的內容實時的以十倍的計算結果輸出來。原來我百度了一下，發現有很好的解決辦法。使用原生js來解決這個問題。當然了這里的是輸出并不需要服務器的支持，也就是說數據并不經過服務器，如果經過服務器的話，這個辦法就沒有用了。
代碼
<input type="number" placeholder="請輸入充值的RMB金額" name="pay_number" id="pay_number" onkeyup="javascript：senddata(this);"/> 元 <span id="outdiv"></span>
//下方為js代碼，上方為HTML構造
<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>代碼很簡單，一看就懂，，不懂的話，會用就好。
演示
圖片演示
后語這幾天在做一個積分的玩意，就是付費可見，在線充值的玩意，不是什么高大上的功能，地址可以去看下：http://googlo.me/chongzhi.html
題圖來自unsplash
SS動畫提示框，可以用在用戶輸入信息時候的提醒功能上
如下：
實現代碼
html：
css:
日常開發中，為了方便數據的輸入和輸出，JavaScript提供了一些常用的輸入輸出語句，具體如表1-3所示。
表1常用的輸入輸出語句
類型 | 語句 | 說明 |
輸入 | prompt() | 用于在瀏覽器中彈出輸入框，用戶可以輸入內容 |
輸出 | alert() | 用于在瀏覽器中彈出警告框 |
document.write() | 用于在網頁中輸出內容 | |
console.log() | 用于在控制臺中輸出信息 |
接下來將分別演示document.write0、console.log0和promptO的使用。
1. document.write()
document.write0的輸出內容中如果含有HTML標簽，會被瀏覽器解析。下面利用documenL.write0在頁面中輸出“我是document.write0語句!”，示例代碼如下。
document.write('我是document.write()語句！');2. console.log()
利用console.log0語句在控制臺輸出“我是console.log0語句!”，示例代碼如下。
console.log('我是console.log()語句!');console:.log0的輸出結果需要在瀏覽器的控制臺中查看。在Chrome 瀏覽器中按“F12”鍵(或在網頁空白區域右擊，在彈出的菜單中選擇“檢查”)啟動開發者工具，然后切換到“Console”(控制臺)面板，即可看到console.log0的輸出結果。
3.prompt()
利用prompt0語句實現在頁面中彈出一個帶有提示信息的輸入框，示例代碼如下。
prompt(請輸入姓名：');上述示例代碼運行后，將在頁面中彈出一個輸人框并提示用戶“請輸人姓名：”提示框。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
