1. 程式人生 > >微信小程式文字框限制輸入字數

微信小程式文字框限制輸入字數

效果圖

在這裡插入圖片描述

wxml程式碼
<view style="border: 1px solid #FFA6A6; border-radius: 10px;">
     <textarea placeholder-class="place-holder"  placeholder="請從以下四個方面填寫求求職簡介 1. 教育背景介紹,如學校專業描述、個人學習成績獎學金情況  2. 技能介紹(多描述就業相關技能),培訓證書等  3. 描述實習經歷、社會實踐經歷,或者社團經歷 4. 希望從事的領域及職位 " name="introduction" maxlength='300' bindinput='limit' value="{{text}}" style="font-size: 14px;"/>

      <!-- 顯示字數 -->
      <view class="clear"><text style="color: #ccc; font-size: 14px; float: right; margin-right: 2%;">{{current}} / {{max}} (最多可寫300字)</text></view>
</view>
js程式碼:
Page({
	data: {
		// 字數限制
   		current: 0,
    	max: 300,
	},
	 // 文字框字數限制
  	limit: function (e)  {
    	var value = e.detail.value;
    	var length = parseInt(value.length);

   	 if  (length > this.data.noteMaxLen) {
      	return;
   	 }

    	this.setData({
      	current: length
    	});
  	},
})

相關推薦

程式文字限制輸入字數

效果圖 wxml程式碼 <view style="border: 1px solid #FFA6A6; border-radius: 10px;"> <textarea p

程式之swiper限制迴圈滑動

最近接的一個單子是使用swiper來達到頁面之間完美滑動的效果的。也就三個頁面首頁、內容頁、尾頁。 但是客戶要求首頁不能滑到尾頁,尾頁不能滑到首頁。 在官方文件中沒有找到方法,因此只能繞彎路了。  wxml頁面程式碼:重點在於 current='{{show_index}}'

程式效果解析

先上程式碼 wxml部分: <view class='top' bindtap='powerDrawer' data-statu="open" data-num='300'> <text>向上彈起</text> </view> <

使用高德地圖程式SDK開發案例-輸入提示(附原始碼)

閒來無事寫一篇使用高德地圖的微信小程式SDK開發應用的例項。 接下來先看需求: 我們要做的是,根據使用者輸入的關鍵詞,給出相應的提示資訊,列表中顯示地方的名稱,地方的詳細地址以及對應的經緯度座標。 當然在UI上我們儘量做到理想的視覺與較好的使用者體驗。 最終的效果我們希望是像這樣的,

程式文字滾動

startScroll() { let query = wx.createSelectorQuery() let last query.select('#box').scrollOffset() let getNowSrollLeft = function (cb)

程式-文字跑馬燈效果

效果如圖 WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view class=

程式-文字迴圈滾動效果

WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{msgList}}">

程式文字迴圈滾動效果

WXML <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="1000"> <block wx:for="{{

程式文字跑馬燈效果

WXML <scroll-view class="container"> <view class="scrolltxt"> <view class="marquee_box"> <view cla

程式——文字沉底居中(0基礎開發者,好痛苦)

    這幾天想把一段文字置於頁面底部,試了好多方法都不可以,今天終於成功了上傳一下成功經歷。     最開始的方法,只是沉底,但是無法居中。 .section_text{ position: fixed; bottom: 30rpx; left: 0;

程式搜尋自動補全功能

▶動態效果圖◀   ▶效果涉及到的input屬性◀ focus     Boolean     false     獲取焦點      bindinput &nb

關於程式文字水平垂直居中

1.用line-height的值和view的height值一樣wxml:<view class='container'> 這是個例子 </view>wxss:.container{ border: 2rpx black solid; w

程式input在某些手機上獲取資料失敗

因為加了有資料為空不允許提交的判斷,測試的時候發現有的手機總是提示有資料為空,不能提交, 測試之後發現是填寫手機號的input框type型別為number,然後寫了三個框分別獲取資料, type型別分別為digit(帶小數點的數字鍵盤)、number、text,結果如下圖: 只有t

程式-文字跑馬燈

效果 wxml <view>1 顯示完後再顯示</view> <view class="example"> <view class="marquee_box"> <view class="

程式文字水平垂直居中對齊問題(完美解決方案)

我們知道常用的居中對齊方式有很多種例如:text-align:center; align-items:center; justify-content: center; margin: auto; #子

程式搜尋 回車搜尋事件

這裡寫的是在微信小程式裡的搜尋框,按軟鍵盤迴車鍵觸發搜尋事件。首先前臺程式碼,這是整個搜尋框程式碼<view class="weui-search-bar"> <view class="weui-search-bar__form"&g

程式文字滾動卡頓的解決辦法

目前,針對微信小程式,文字滾動的效果。傳統使用定時器,改變px畫素點。是會出現卡頓的情況的,動畫會非常不流暢。這裡建議的是使用css3動畫。但是有一個點需要注意的是,就算是使用CSS3屬性,我們也不能去更改bottom、top、margin、padding、等值來產生位移。

程式-form表單-獲取使用者輸入文字的值

微信小程式-form表單-獲取使用者輸入文字框的值 <input name='formnickname' class="textarea" placeholder="{{geren.nickname}}" value='{{geren.nickname}}' bi

程式自制提示(具有輸入文字功能)

微信小程式自帶的API中的頁面互動功能,雖然提示功能非常全面,但是所有的互動API中是沒有可以自己在提示框中輸入文字的功能,那麼現在我們來自己做這樣的一個提示框(可以帶有輸入功能),在提示框輸入完內容之後,點選確定,可以將文字內容返回,點選取消則可以回到之前的狀態。(在這裡,

程式輸入屬性 cursor-spacing 問題

微信小程式輸入框屬性 cursor-spacing 問題 問題描述 微信小程式給輸入框提供了屬性 cursor-spacing,用處是聚焦時游標離軟鍵盤的距離,但是在安卓機子上會出現不太好使,比如,沒有達到預期的設定值,還有滑動到底部,設定的值不起作用。 解決方