0
Я хочу, чтобы пользователь мог ввести фразу из основного текста, а затем заменить этот текст на то, что пожелает пользователь. Я считаю, что .replaceWith() будет лучше всего, однако я не совсем уверен, как его реализовать.Использование jQuery replaceWith() для замены выделенного текста на ввод текста
Вот мой HTML для области ввода.
<h2>Replace</h2>
<table>
<tr>
<td>Original:</td>
<td>
<input id="original" type="text" />
</td>
</tr>
<tr>
<td>New Text:</td>
<td>
<input id="newtext" type="text" />
</td>
</tr>
<tr>
<td colspan="2">
<input id="replace" type="button" name="save" value="Replace" />
</td>
</tr>
</table>
</div>
, и я хотел бы, чтобы пользователь мог ввести слово или фразу из #text (тел), а затем ввести в новой текстовой части ввода, какой текст они хотели бы заменить оригинальный текст с.
Единственное, с чем я столкнулся, состоит в том, что пользователь может ввести любое слово или фразу из «оригинального» текста и заменить «оригинальный» текст на что угодно.
Я думал, что-то вроде
$("table").click(function(){
$("#text").replaceWith("anything the user wants");
});
Спасибо!
ВСЕ
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#red").click(function(){
$("#text").css("color","red");
});
$("#blue").click(function(){
$("#text").css("color","blue");
});
$("#green").click(function(){
$("#text").css("color","green");
});
$("#times_new_roman").click(function(){
$("#text").css("font-family","'Times New Roman'");
});
$("#courier").click(function(){
$("#text").css("font-family","courier");
});
$("#comic_sans").click(function(){
$("#text").css("font-family","'Comic Sans MS'");
});
$("#arial").click(function(){
$("#text").css("font-family","Arial");
});
$('input[name="decoration"]').change(function(){
if ($(this).val() == 'bold'){
if ($(this).is(':checked')) $("#text").css('font-weight', "bold");
else $("#text").css('font-weight', "normal");
}
else if ($(this).val() == 'italic'){
if ($(this).is(':checked')) $("#text").css('font-style', "italic");
else $("#text").css('font-style', "normal");
}
});
$('input[name="font"]').bind('keypress', function (event) {
var regex = new RegExp("[0-9]");
var key = String.fromCharCode(!event.charCode ? event.which : event.charCode);
if (!regex.test(key)) {
event.preventDefault();
return false;
}
});
$("#up").click(function() {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize++;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$("#down").click(function() {
var currentSize = $("#text").css("font-size");
currentSize = currentSize.replace(/[^\d.]/g, "");
currentSize--;
if(currentSize < 10 || currentSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + currentSize + "px");
}
});
$('input[name="font"]').on("keyup change", function() {
var newSize = $(this).val();
if(newSize < 10 || newSize > 80){
alert("Font-size between 10 and 80 only!");
}
else {
$("#text").css("font-size", "" + newSize + "px");
}
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>INFO 2300 - HW1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" title="StyleSheet" />
</head>
<body>
<div id="wrapper">
<h1>Super Cool Javascript Text Editor</h1>
<form id="controlForm" class="controls" action="index.php" method="post" onsubmit="return false;">
<div id="color">
<h2 class="test2">Font Color</h2>
<label for="red">Red</label>
<input type="radio" name="color" value="Red" id="red" /><br />
<label for="blue">Blue</label>
<input type="radio" name="color" value="Blue" id="blue" /><br />
<label for="green">Green</label>
<input type="radio" name="color" value="Green" id="green" /><br />
</div>
<div>
<h2>Font Family</h2>
<!-- Giving specific names, then generic ones, is useful for font families
because not everyone has every font. -->
<label for="courier">Courier</label>
<input type="radio" name="family" value="courier,monospace" id="courier" /><br />
<label for="times_new_roman">Times New Roman</label>
<input type="radio" name="family" value="times new roman,serif" id="times_new_roman" /><br />
<label for="arial">Arial</label>
<input type="radio" name="family" value="arial,sans-serif" id="arial" /><br />
<label for="comic_sans">Comic Sans MS</label>
<input type="radio" name="family" value="comic sans ms, sans-serif" id="comic_sans" /><br />
</div>
<div id="font">
<h2>Font Size</h2>
<input name="font" type="text" value="15"/>px
<br /><span id="sizeWarning"></span>
<div>
</div>
<h2>Text Decoration</h2>
<label for="bold">Bold</label>
<input type="checkbox" name="decoration" value="bold" id="bold" /><br />
<!-- Added for italic -->
<label for="italic">Italic</label>
<input type="checkbox" name="decoration" value="italic" id="italic" /><br />
</div>
<div>
<h2>Search Features [Already Implemented]</h2>
<input id="search" type="text" name="search"/>
</div>
<div>
<h2>Replace</h2>
<table>
<tr><td>Original: </td><td><input id="original" type="text" /></td></tr>
<tr><td>New Text: </td><td><input id="newtext" type="text" /></td></tr>
<tr><td colspan="2"><input id="replace" type="button" name="save" value="Replace" /></td></tr>
</table>
</div>
</form>
<form id="myform" class="test" action="saveFile.php" method="post">
<div id="saveResult" class="saveResult">
<input name="hiddentext" type="hidden" />
<input name="settings" type="hidden" />
<input name="savebutton" type="submit" value="Save file" />
</div>
</form>
<div id="text">
<?php
//reads in the file
$file = file("lorem.txt");
foreach($file as $line){
echo "<p>".$line."</p>";
}
?>
</div>
</div>
</body>
</html>
Что вы пытаетесь достичь? Если я правильно понял, вы не хотите, чтобы пользователь мог редактировать первое поле ввода? Вы можете использовать свойство «readonly». Также вы можете использовать элемент '# text'? –
см., Где вход #original есть? ну на моей странице у меня есть абзац текста.Я хочу, чтобы пользователь вводил фразу или слово из этого абзаца текста (#text), а затем мог заменить это слово или фразу, чем бы они ни вводились в поле ввода # заменить. Я выложу все свои html/js, чтобы вы могли видеть. его вид много tho – user3321452
'replaceWith()' для замены объектов DOM. Вы хотите String.replace. –