微信小程序怎样设置textarea文本域输入?

微信小程序怎样设置textarea文本域输入?,第1张

解决微信小程序怎样设置textarea文本域输入的步骤如下:

1.第一步,打开微信小程序开发工具,在指定的wxml文件中插入一个textarea组件,脊唯数设置最大长度、失去焦点事件等。

2.第二步,在界面对应的JavaScript文件,添加失去焦点事件,并获取文本域文字山笑内容。

3.第三步,接着保存代码并在模拟器中预览界面显示效果,可以看到一个文本域。

4.第四步,在文本域组件中输入相应的文字内容,尽可能输入多的内容。

5.第五步,接着在浏览器的控制台下方,查看打印的结果值,跟文本域中的一致。

6.第六步,最后再输入其他的文字内容,由于限制了文本域的最大输入长度,边输樱首入边查看结果。这样就解决了微信小程序怎样设置textarea文本域输入的问题了。

输入代码

<textarea class="weui-textarea" placeholder="请输入文本" style="height: 3.3em" />

就可以设置了。

微信小程序 textarea 不可行的原因和简易解决方案

微信小程序中textarea没有bindchange事件,所以无法在输入时给变量赋值。

虽然可以使用bindblur事件,但是绑定bindblur事件,如果再点击按钮,则先执行完按钮事件唯帆拆后,再去执行bindblur事件,所以在js文件取不到输入值。

解决方法:结合from表单,textarea文本框输入后,再去点击提交按钮,这时会先执行textarea事件(获取文本框输入内容),再去执行数据提指枣交,这样问题就解决了。

2.wxml文件代码

3.js文件代码轿困

函数grin实现点击某档手个表情图标,就可以将表情图标翻译成代码并插入到指定的textarea中的鼠标光标停留位置。

具体实现方法:

var myField

if (...) {

myField = document.getElementById(tagname)

}else {

return false

}

定义一个局部变量myField,并指向指定的textarea,如果不存在指定的textarea则退出。

if (document.selection) {

myField.focus()

sel = document.selection.createRange()

sel.text = tag

myField.focus()

}

判断是否存在document.selection对象,主要是因为浏览器之间的差异,IE支持document.selection,FF不支持,所以要先判断一下。如御薯果存在,则:

1、焦点转到指定的textarea

2、调用selection对象的createRange方法,该方法可以返回处于激活状态的输入框中选中的文本,如果没有选中任何文本,则自动定位到光标位置,并返回空字符串。表述的可能不太准确,可以搜索一下。

3、将选定的文本替换成表情对象对应的代码,如果没有选中文本,则将表情代码插入到光标位置。

4、焦点转到textarea。

else if (myField.selectionStart || myField.selectionStart == '0') {

var startPos = myField.selectionStart

var endPos = myField.selectionEnd

var cursorPos = endPos

myField.value = myField.value.substring(0,startPos)

+ tag

+ myField.value.substring(endPos, myField.value.length)

cursorPos += tag.length

myField.focus()

myField.selectionStart = cursorPos

myField.selectionEnd = cursorPos

}

如果浏览器不支持selection,则使用selectionStart和selectionEnd对象,从字面可以理解这两个对象是表示选中文本在输入框所有字符串中的起始位置和结束位置,调用subString方法以这两个位置分割输入框中的全部字符串为3个字符串,然后将选中的文本(即中间的字符串,如果没有选中文本则中间的字符串为空)替换成表情代码,最后把光标定位到表情代码的末尾,并行拆嫌且取消选中。

else {

myField.value += tag

myField.focus()

}

如果浏览器以上两种方法都不支持,则直接把表情代码添加到textarea中所有文本的末尾。

大概就是这么个意思吧。写的好累,楼主别忘了给分哦。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12260461.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存