Welink ui组件介绍Form(文本域)
Form(文本域)
填写类表单-文本域。Form UI 提供与WeLink规范一致的表单视图。
<div class="page" style="background: #eee;">
<div class="page__hd">
<h1 class="page__title">Form</h1>
<p class="page__desc">表单(填写)
</div>
<div class="page__bd">
<div class="weui-form_view">
<div class="weui-form_view-cell__access_view">
<div class="weui-form_view-cell__access_container">
<div class="weui-cell">
<div class="weui-cell__bd">
<input class="weui-input" id="inputtext" type="text" placeholder="请输入文本" value="这是初始化文本内容"/>
</div>
<div class="weui-cell__ft" id="inputclear" style="display:block;">
<i class="weui-icon-clear"></i>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__access_view">
<div class="weui-form_view-cell__access_view-item">
<div class="weui-form_view-cell__access_label">标题</div>
<div class="weui-form_view-cell__access_container">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__access_view">
<div class="weui-form_view-cell__access_container">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__access_view">
<div class="weui-form_view-cell__access_label">标题</div>
<div class="weui-form_view-cell__access_tags">
<span>常用</span>
<span>常用</span>
<span>常用三</span>
<span>常用四字</span>
</div>
<div class="weui-form_view-cell__access_container">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form_view" style="margin-top: 30px;">
<div class="weui-form_view-cell__access_view">
<div class="weui-form_view-cell__access_tags weui-form_view-cell__access_tags_nolabel">
<span>常用</span>
<span>常用</span>
<span>常用三</span>
<span>常用四字</span>
</div>
<div class="weui-form_view-cell__access_container">
<div class="weui-cell">
<div class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="请输入文本" rows="3"></textarea>
<div class="weui-textarea-counter"><span>0</span>/200</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
function changeValue() {
if($('#inputtext').val()) {
$('#inputclear').show();
} else {
$('#inputclear').hide();
}
}
$('#inputclear').click(function(){
$('#inputtext').val('');
$(this).hide();
});
$('#inputtext').on('input', function() {
changeValue();
});
$('.weui-textarea').on('input', function(){
const value = $(this).val();
if(value.length > 200) {
$(this).val(value.substr(0, 200));
}
const $count = $(this).parent().find('.weui-textarea-counter span');
$count.html($(this).val().length);
});
$('.weui-form_view-cell__access_tags span').click(function(){
const $parent = $(this).parent().parent();
const $textArea = $parent.find('.weui-textarea');
const value = $textArea.val() + $(this).html();
$textArea.val(value.replace(' ', ''));
if(value.length > 200){
$textArea.val(value.substr(0, 200));
}
const $count = $parent.find('.weui-textarea-counter span');
$count.html($textArea.val().length);
});
});
</script>
- 点赞
- 收藏
- 关注作者
评论(0)