微信小程序，weixin，微信小程序怎么设置textarea文本域输入_软件运维

输入代码

就可以设置了。

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

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

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

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

2.wxml文件代码

3.js文件代码

(1)、使用 contenteditable 属性，可让 div 具有编辑输入效果

(2)、模拟 placeholder 的提示效果，此处直接用 CSS 实现

(3)、contenteditable 在IOS上有兼容性，虽然能聚焦，但是不能输入内容，此时需要借助属性 -webkit-user-select: text , 来解决这个兼容性

(4)、缺点：获取 div 文本的时候，内部会包含一些HTML标签，所以需要单独处理转译的数据，才能正常使用数据

（1）、设置一个 div 与 textarea 同层级，外层包裹一个 div ,定位为 relative

（2）、textarea 绝对定位，宽度高度均为 100%，相对于父层 div 来说

（3）、内部 div，设置为 relative，在检测 textarea 的 onchange 事件的时候，把文本填充到内部 div 里面，以此来撑开父层 div 的高度和宽度

（4）、给内部 div 设置不可见属性，visibility：hidden，这样 div 是看不见的，但是它的物理位置是存在的，所以能够撑开父层 div

（5）、该方案相对于方案一来说，更简便和完美，尤其是需要获取输入内容的时候

Javascript设置和获取Textarea的光标位置的方法，可定位光标到某个位置：

效果如图：

源码：

<title>JS设置及获取Textarea的光标位置</title>

var isIE = !(!document.all)

function posCursor(){

var start=0,end=0

var oTextarea = document.getElementById("textarea")

if(isIE){

//selection 当前激活选中区，即高亮文本块，和/或文当中用户可执行某些 *** 作的其它元素。

//createRange 从当前文本选中区中创建 TextRange 对象，

//或从控件选中区中创建 controlRange 集合。

var sTextRange= document.selection.createRange()

//判断选中的是不是textarea对象

if(sTextRange.parentElement()== oTextarea){

//创建一个TextRange对象

var oTextRange = document.body.createTextRange()

//移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。

oTextRange.moveToElementText(oTextarea)

//此时得到两个 TextRange

//oTextRange文本域(textarea)中文本的TextRange对象

//sTextRange是选中区域文本的TextRange对象

//compareEndPoints方法介绍，compareEndPoints方法用于比较两个TextRange对象的位置

//StartToEnd 比较TextRange开头与参数TextRange的末尾。

//StartToStart比较TextRange开头与参数TextRange的开头。

//EndToStart 比较TextRange末尾与参数TextRange的开头。

//EndToEnd 比较TextRange末尾与参数TextRange的末尾。

//moveStart方法介绍，更改范围的开始位置

//character 按字符移动

//word 按单词移动

//sentence 按句子移动

//textedit 启动编辑动作

//这里我们比较oTextRange和sTextRange的开头，的到选中区域的开头位置

for (start=0 oTextRange.compareEndPoints("StartToStart", sTextRange) < 0 start++){

oTextRange.moveStart('character', 1)

}

//需要计算一下\n的数目(按字符移动的方式不计\n,所以这里加上)

for (var i = 0 i <= start i ++){

if (oTextarea.value.charAt(i) == '\n'){

start++

}

//再计算一次结束的位置

oTextRange.moveToElementText(oTextarea)

for (end = 0 oTextRange.compareEndPoints('StartToEnd', sTextRange) < 0 end ++){

oTextRange.moveStart('character', 1)

}

for (var i = 0 i <= end i ++){

if (oTextarea.value.charAt(i) == '\n'){

end++

}

}else{

start = oTextarea.selectionStart

end = oTextarea.selectionEnd

}

document.getElementById("start").value = start

document.getElementById("end").value = end

}

function moveCursor(){

var oTextarea = document.getElementById("textarea")

var start = parseInt(document.getElementById("start").value)

var end = parseInt(document.getElementById("end").value)

if(isNaN(start)||isNaN(end)){

alert("位置输入错误")

}

if(isIE){

var oTextRange = oTextarea.createTextRange()

var LStart = start

var LEnd = end

var start = 0

var end = 0

var value = oTextarea.value

for(var i=0 i<value.length && i<LStart i++){

var c = value.charAt(i)

if(c!='\n'){

start++

}

for(var i=value.length-1 i>=LEnd && i>=0 i--){

var c = value.charAt(i)

if(c!='\n'){

end++

}

oTextRange.moveStart('character', start)

oTextRange.moveEnd('character', -end)

//oTextRange.collapse(true)

oTextRange.select()

oTextarea.focus()

}else{

oTextarea.select()

oTextarea.selectionStart=start

oTextarea.selectionEnd=end

}

</script>

<body>

<tr>

<td>start: <input type="text" id="start" size="3" value="0"/></td>

</tr>

<tr>

<textarea id="textarea"

onKeydown="posCursor()"

onKeyup="posCursor()"

onmousedown="posCursor()"

onmouseup="posCursor()"

onfocus="posCursor()"

rows="14"

cols="50">虞美人

春花秋月何时了，往事知多少。

小楼昨夜又东风，故国不堪回首月明中！

雕l栏玉砌应犹在，只是朱颜改。

问君能有几多愁？恰似一江春水向东流。</textarea>

</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

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

微信小程序，weixin，微信小程序怎么设置textarea文本域输入

发表评论

评论列表（0条）