我有两个 input
字段和一个 textarea
。当我在 input
字段中键入内容时,它们的 .val()
会自动添加到 textarea
。
它工作正常,但我希望 textarea
中的这些值是只读的。
我希望文本区域的行为如下:
我可以输入额外的文本,但不能删除从两个 input
字段中获得的文本。
$(function() {
var text1 = $('#text1');
var text2 = $('#text2');
var description = $('#description');
function onChange() {
description.val("Chesis No: " + text1.val() + ", Engine No: " + text2.val());
var base = description.val();
var regex = new RegExp("^" + base, "i");
$('#description').on("input", function(ev) {
var query = $(this).val();
if (!regex.test(query)) {
//ev.preventDefault();
$(this).val(base);
}
});
}
$('#text1')
.change(onChange)
.keyup(onChange);
$('#text2')
.change(onChange)
.keyup(onChange);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<textarea rows="4" cols="50" name="postContent" id="description"></textarea>
最佳答案
更新的答案
只使用一个textarea
我对您的代码进行了更多尝试,最终得到了这个非常简单的解决方案:
- 拆分
textarea
的所有行, - 将输入的值放在第一行(模拟该行的“只读”)
- 加入所有线路。
这是一个工作片段:
(请参阅我的代码中的注释)
$(function() {
var text1 = $('#text1');
var text2 = $('#text2');
var description = $('#description');
// TAKIT: Changed all in this function
function onChange() {
var desc = description.val().split('\n');
// TAKIT: Modified here
var texts = []; // TAKIT: Added an array to make it easier
if (text1.val()) texts.push("Chesis No: " + text1.val());
if (text2.val()) texts.push("Engine No: " + text2.val());
desc[0] = texts.join(', ');
if (desc.length == 1) desc[1] = '';
description.val(desc.join('\n'));
}
// TAKIT: Suggestion to simplify
$('.form-control').on('keyup change', onChange);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<input type="text" id="text2" placeholder="Engine No" class="form-control" />
<br><br>
<textarea rows="6" cols="50" name="postContent" id="description" class="form-control"></textarea>
我认为再简单不过了!
希望对您有所帮助。
⋅ ⋅ ⋅
旧答案
添加新的 textarea
由于您不能拥有“部分只读”元素,因此我建议您改用该方法:
- 添加一个新的
textarea
元素,其中id="text3"
, - 使用
$('[id^="text"]')
简化您的代码,以选择所有 id 以“text”开头的元素, - 在
#description
textarea
上添加readonly
属性,合并来自输入元素的文本。
这样,#description
中的结果内容将可以选择/复制/粘贴,但不可修改。
工作片段:
$(function() {
var text1 = $('#text1');
var text2 = $('#text2');
var text3 = $('#text3'); // TAKIT: Added
var description = $('#description');
function onChange() {
description.val("Chesis No: " + text1.val() + ", Engine No: " + text2.val() + '\n' + text3.val()); // TAKIT: Added
var base = description.val();
var regex = new RegExp("^" + base, "i");
$('#description').on("input", function(ev) {
var query = $(this).val();
if (!regex.test(query)) {
//ev.preventDefault();
$(this).val(base);
}
});
}
// TAKIT: Suggestion to simplify
$('[id^="text"]')
.change(onChange)
.keyup(onChange);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="text1" placeholder="Chassis No" class="form-control" />
<br>
<input type="text" id="text2" placeholder="Engine No " class="form-control" />
<br>
<textarea id="text3" placeholder="Comments" class="form-control"></textarea>
<br><br>
<textarea rows="4" cols="50" name="postContent" id="description" readonly></textarea>
希望对您有所帮助!
关于javascript - 文本区域可编辑,输入值除外,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50619926/